diff --git a/README.md b/README.md
index bb0348e..5eb96f4 100644
--- a/README.md
+++ b/README.md
@@ -1,96 +1,3 @@
-# Obsidian Sample Plugin
+# Obsidian Intelligence
 
-This is a sample plugin for Obsidian (https://obsidian.md).
-
-This project uses Typescript to provide type checking and documentation.
-The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does.
-
-**Note:** The Obsidian API is still in early alpha and is subject to change at any time!
-
-This sample plugin demonstrates some of the basic functionality the plugin API can do.
-- Adds a ribbon icon, which shows a Notice when clicked.
-- Adds a command "Open Sample Modal" which opens a Modal.
-- Adds a plugin setting tab to the settings page.
-- Registers a global click event and output 'click' to the console.
-- Registers a global interval which logs 'setInterval' to the console.
-
-## First time developing plugins?
-
-Quick starting guide for new plugin devs:
-
-- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with.
-- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
-- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
-- Install NodeJS, then run `npm i` in the command line under your repo folder.
-- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
-- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
-- Reload Obsidian to load the new version of your plugin.
-- Enable plugin in settings window.
-- For updates to the Obsidian API run `npm update` in the command line under your repo folder.
-
-## Releasing new releases
-
-- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
-- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
-- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
-- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release.
-- Publish the release.
-
-> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`.
-> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json`
-
-## Adding your plugin to the community plugin list
-
-- Check https://github.com/obsidianmd/obsidian-releases/blob/master/plugin-review.md
-- Publish an initial version.
-- Make sure you have a `README.md` file in the root of your repo.
-- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.
-
-## How to use
-
-- Clone this repo.
-- Make sure your NodeJS is at least v16 (`node --version`).
-- `npm i` or `yarn` to install dependencies.
-- `npm run dev` to start compilation in watch mode.
-
-## Manually installing the plugin
-
-- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
-
-## Improve code quality with eslint (optional)
-- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. 
-- To use eslint with this project, make sure to install eslint from terminal:
-  - `npm install -g eslint`
-- To use eslint to analyze this project use this command:
-  - `eslint main.ts`
-  - eslint will then create a report with suggestions for code improvement by file and line number.
-- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder:
-  - `eslint .\src\`
-
-## Funding URL
-
-You can include funding URLs where people who use your plugin can financially support it.
-
-The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file:
-
-```json
-{
-    "fundingUrl": "https://buymeacoffee.com"
-}
-```
-
-If you have multiple URLs, you can also do:
-
-```json
-{
-    "fundingUrl": {
-        "Buy Me a Coffee": "https://buymeacoffee.com",
-        "GitHub Sponsor": "https://github.com/sponsors",
-        "Patreon": "https://www.patreon.com/"
-    }
-}
-```
-
-## API Documentation
-
-See https://github.com/obsidianmd/obsidian-api
+AI-powered assistants trained on your notes
\ No newline at end of file
diff --git a/main.ts b/main.ts
index 6d9c656..f42bd2e 100644
--- a/main.ts
+++ b/main.ts
@@ -1,18 +1,26 @@
-import { App, Editor, MarkdownView, Modal, Plugin, PluginSettingTab, Setting } from 'obsidian';
-import { AppView, VIEW_TYPE } from './src/ui/window';
+import { App, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { AppView, VIEW_TYPE } from './src/ui/AppView';
+import OpenAI from 'openai';
+import { IThread } from './src/ui/types';
 
-// Remember to rename these classes and interfaces!
-
-interface MyPluginSettings {
-	mySetting: string;
+interface ObsidianIntelligenceSettings {
+	openaiKey: string;
+	threads: IThread[];
+	activeThread: IThread | undefined;
+	activeAssistant: OpenAI.Beta.Assistant | undefined;
+	activeAssistantFiles: OpenAI.Files.FileObject[] | undefined;
 }
 
-const DEFAULT_SETTINGS: MyPluginSettings = {
-	mySetting: 'default'
+const DEFAULT_SETTINGS: ObsidianIntelligenceSettings = {
+	openaiKey: '',
+	threads: [],
+	activeThread: undefined,
+	activeAssistant: undefined,
+	activeAssistantFiles: undefined,
 }
 
-export default class MyPlugin extends Plugin {
-	settings: MyPluginSettings;
+export default class ObsidianIntelligence extends Plugin {
+	settings: ObsidianIntelligenceSettings;
 	view: AppView;
 
 	async onload() {
@@ -22,7 +30,7 @@ export default class MyPlugin extends Plugin {
             (leaf) => (new AppView(leaf, this))
         );
 
-		const ribbonIconEl = this.addRibbonIcon('dice', 'Open Agent View', (evt: MouseEvent) => {
+		const ribbonIconEl = this.addRibbonIcon('bot', 'Open Obsidian Intelligence', (evt: MouseEvent) => {
 			this.activateView();
 		});
 		// Perform additional things with the ribbon
@@ -33,62 +41,16 @@ export default class MyPlugin extends Plugin {
 		statusBarItemEl.setText('Status Bar Text');
 
 		this.addCommand({
-            id: "habitica-view-open",
-            name: "Open Writing Assistant",
-            hotkeys: [{ modifiers: ["Mod", "Shift"], key: "h"}],
+            id: "obsidian-intelligence-view-open",
+            name: "Open Obsidian Intelligence",
+            hotkeys: [{ modifiers: ["Mod", "Shift"], key: "I"}],
             callback: () => {
                 this.activateView();
             }
         });
 
-		// This adds a simple command that can be triggered anywhere
-		this.addCommand({
-			id: 'open-sample-modal-simple',
-			name: 'Open sample modal (simple)',
-			callback: () => {
-				new SampleModal(this.app).open();
-			}
-		});
-		// This adds an editor command that can perform some operation on the current editor instance
-		this.addCommand({
-			id: 'sample-editor-command',
-			name: 'Sample editor command',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('Sample Editor Command');
-			}
-		});
-		// This adds a complex command that can check whether the current state of the app allows execution of the command
-		this.addCommand({
-			id: 'open-sample-modal-complex',
-			name: 'Open sample modal (complex)',
-			checkCallback: (checking: boolean) => {
-				// Conditions to check
-				const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView);
-				if (markdownView) {
-					// If checking is true, we're simply "checking" if the command can be run.
-					// If checking is false, then we want to actually perform the operation.
-					if (!checking) {
-						new SampleModal(this.app).open();
-					}
-
-					// This command will only show up in Command Palette when the check function returns true
-					return true;
-				}
-			}
-		});
-
 		// This adds a settings tab so the user can configure various aspects of the plugin
-		this.addSettingTab(new SampleSettingTab(this.app, this));
-
-		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
-		// Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
-
-		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
-		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
+		this.addSettingTab(new OISettingTab(this.app, this));
 	}
 
 	onunload() {
@@ -117,26 +79,10 @@ export default class MyPlugin extends Plugin {
     }
 }
 
-class SampleModal extends Modal {
-	constructor(app: App) {
-		super(app);
-	}
+class OISettingTab extends PluginSettingTab {
+	plugin: ObsidianIntelligence;
 
-	onOpen() {
-		const {contentEl} = this;
-		contentEl.setText('Woah!');
-	}
-
-	onClose() {
-		const {contentEl} = this;
-		contentEl.empty();
-	}
-}
-
-class SampleSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
-
-	constructor(app: App, plugin: MyPlugin) {
+	constructor(app: App, plugin: ObsidianIntelligence) {
 		super(app, plugin);
 		this.plugin = plugin;
 	}
@@ -147,13 +93,13 @@ class SampleSettingTab extends PluginSettingTab {
 		containerEl.empty();
 
 		new Setting(containerEl)
-			.setName('Setting #1')
-			.setDesc('It\'s a secret')
+			.setName('OpenAI Key')
+			.setDesc('Can find it https://platform.openai.com/api-keys')
 			.addText(text => text
-				.setPlaceholder('Enter your secret')
-				.setValue(this.plugin.settings.mySetting)
+				.setPlaceholder('Enter your API Key')
+				.setValue(this.plugin.settings.openaiKey)
 				.onChange(async (value) => {
-					this.plugin.settings.mySetting = value;
+					this.plugin.settings.openaiKey = value;
 					await this.plugin.saveSettings();
 				}));
 	}
diff --git a/manifest.json b/manifest.json
index 624001a..33e8155 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,11 +1,11 @@
 {
-	"id": "sample-plugin",
-	"name": "Sample Plugin",
+	"id": "obsidian-intelligence",
+	"name": "Obsidian Intelligence",
 	"version": "1.0.0",
 	"minAppVersion": "0.15.0",
-	"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
-	"author": "Obsidian",
-	"authorUrl": "https://obsidian.md",
-	"fundingUrl": "https://obsidian.md/pricing",
+	"description": "AI-powered assistants inside Obsidian",
+	"author": "John Mavrick",
+	"authorUrl": "https://beacons.ai/johnmavrick",
+	"fundingUrl": "https://patreon.com/johnmavrick",
 	"isDesktopOnly": false
 }
diff --git a/package-lock.json b/package-lock.json
index 1612a6f..92200a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,25 @@
 {
-	"name": "obsidian-sample-plugin",
+	"name": "obsidian-intelligence",
 	"version": "1.0.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "obsidian-sample-plugin",
+			"name": "obsidian-intelligence",
 			"version": "1.0.0",
 			"license": "MIT",
 			"dependencies": {
+				"@popperjs/core": "^2.11.8",
 				"@types/react": "^18.2.37",
 				"@types/react-dom": "^18.2.15",
+				"lucide-react": "^0.292.0",
 				"openai": "^4.16.1",
 				"react": "^18.2.0",
-				"react-dom": "^18.2.0"
+				"react-dom": "^18.2.0",
+				"react-markdown": "^9.0.1",
+				"react-spinners": "^0.13.8",
+				"react-tooltip": "^5.23.0",
+				"yup": "^1.3.2"
 			},
 			"devDependencies": {
 				"@types/node": "^16.11.6",
@@ -131,6 +137,28 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+			"integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.1.3"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+			"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+			"dependencies": {
+				"@floating-ui/core": "^1.4.2",
+				"@floating-ui/utils": "^0.1.3"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+			"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -202,6 +230,15 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@types/codemirror": {
 			"version": "5.60.8",
 			"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.8.tgz",
@@ -211,18 +248,47 @@
 				"@types/tern": "*"
 			}
 		},
+		"node_modules/@types/debug": {
+			"version": "4.1.12",
+			"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+			"integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+			"dependencies": {
+				"@types/ms": "*"
+			}
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
 			"dev": true
 		},
+		"node_modules/@types/hast": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",
+			"integrity": "sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.14",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz",
 			"integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
 			"dev": true
 		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
+			"integrity": "sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/ms": {
+			"version": "0.7.34",
+			"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+			"integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+		},
 		"node_modules/@types/node": {
 			"version": "16.18.60",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.60.tgz",
@@ -274,6 +340,11 @@
 				"@types/estree": "*"
 			}
 		},
+		"node_modules/@types/unist": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "5.29.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.29.0.tgz",
@@ -461,9 +532,7 @@
 		"node_modules/@ungap/structured-clone": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-			"dev": true,
-			"peer": true
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
 		},
 		"node_modules/abort-controller": {
 			"version": "3.0.0",
@@ -574,6 +643,15 @@
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
 			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 		},
+		"node_modules/bail": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+			"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -648,6 +726,15 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
+		"node_modules/character-entities": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+			"integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/charenc": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
@@ -656,6 +743,11 @@
 				"node": "*"
 			}
 		},
+		"node_modules/classnames": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+			"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -687,6 +779,15 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -726,7 +827,6 @@
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
 			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-			"dev": true,
 			"dependencies": {
 				"ms": "2.1.2"
 			},
@@ -742,8 +842,19 @@
 		"node_modules/debug/node_modules/ms": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-			"dev": true
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
+		"node_modules/decode-named-character-reference": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+			"integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+			"dependencies": {
+				"character-entities": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
 		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
@@ -760,6 +871,26 @@
 				"node": ">=0.4.0"
 			}
 		},
+		"node_modules/dequal": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/digest-fetch": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/digest-fetch/-/digest-fetch-1.3.0.tgz",
@@ -1081,6 +1212,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1328,6 +1464,47 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/hast-util-to-jsx-runtime": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.2.0.tgz",
+			"integrity": "sha512-wSlp23N45CMjDg/BPW8zvhEi3R+8eRE1qFbjEyAUzMCzu2l1Wzwakq+Tlia9nkCtEl5mDxa7nKHsvYJ6Gfn21A==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"style-to-object": "^0.4.0",
+				"unist-util-position": "^5.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/html-url-attributes": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.0.tgz",
+			"integrity": "sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/humanize-ms": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -1390,6 +1567,11 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/inline-style-parser": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+			"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+		},
 		"node_modules/is-buffer": {
 			"version": "1.1.6",
 			"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -1435,6 +1617,17 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/is-plain-obj": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1551,6 +1744,14 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/lucide-react": {
+			"version": "0.292.0",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.292.0.tgz",
+			"integrity": "sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==",
+			"peerDependencies": {
+				"react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/md5": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@@ -1561,6 +1762,60 @@
 				"is-buffer": "~1.1.6"
 			}
 		},
+		"node_modules/mdast-util-from-markdown": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
+			"integrity": "sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark": "^4.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.0.2.tgz",
+			"integrity": "sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+			"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1570,6 +1825,427 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/micromark": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
+			"integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"@types/debug": "^4.0.0",
+				"debug": "^4.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.0.tgz",
+			"integrity": "sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-factory-destination": "^2.0.0",
+				"micromark-factory-label": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-factory-title": "^2.0.0",
+				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-html-tag-name": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-destination": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+			"integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-label": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+			"integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-title": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+			"integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-whitespace": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+			"integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-character": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.0.1.tgz",
+			"integrity": "sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-chunked": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+			"integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-classify-character": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+			"integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-combine-extensions": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+			"integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-numeric-character-reference": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+			"integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+			"integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-html-tag-name": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+			"integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-normalize-identifier": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+			"integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-resolve-all": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+			"integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-subtokenize": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.0.tgz",
+			"integrity": "sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -1848,6 +2524,20 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/property-expr": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+			"integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+		},
+		"node_modules/property-information": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.0.tgz",
+			"integrity": "sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -1901,6 +2591,53 @@
 				"react": "^18.2.0"
 			}
 		},
+		"node_modules/react-markdown": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+			"integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"devlop": "^1.0.0",
+				"hast-util-to-jsx-runtime": "^2.0.0",
+				"html-url-attributes": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"remark-parse": "^11.0.0",
+				"remark-rehype": "^11.0.0",
+				"unified": "^11.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			},
+			"peerDependencies": {
+				"@types/react": ">=18",
+				"react": ">=18"
+			}
+		},
+		"node_modules/react-spinners": {
+			"version": "0.13.8",
+			"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+			"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+			"peerDependencies": {
+				"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/react-tooltip": {
+			"version": "5.23.0",
+			"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.23.0.tgz",
+			"integrity": "sha512-MYqn6n+Af8NHHDL3zrSqzVSoK2LLqTNFp30CuuHCYlBEf+q88FWfg+8pSO+0GnDvOa5ZaryNDq9sAVQeNhnsgw==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0",
+				"classnames": "^2.3.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.14.0",
+				"react-dom": ">=16.14.0"
+			}
+		},
 		"node_modules/regexpp": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -1913,6 +2650,37 @@
 				"url": "https://github.com/sponsors/mysticatea"
 			}
 		},
+		"node_modules/remark-parse": {
+			"version": "11.0.0",
+			"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",
+				"micromark-util-types": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-rehype": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.0.0.tgz",
+			"integrity": "sha512-vx8x2MDMcxuE4lBmQ46zYUDfcFMmvg80WYX+UNLeG6ixjdCCLcw1lrgAukwBTuOFsS78eoAedHGn9sNM0w7TPw==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"unified": "^11.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2027,6 +2795,15 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/strip-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -2060,6 +2837,14 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/style-to-object": {
+			"version": "0.4.4",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
+			"integrity": "sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==",
+			"dependencies": {
+				"inline-style-parser": "0.1.1"
+			}
+		},
 		"node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2080,6 +2865,11 @@
 			"dev": true,
 			"peer": true
 		},
+		"node_modules/tiny-case": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+			"integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2092,11 +2882,34 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/toposort": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+			"integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+		},
 		"node_modules/tr46": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
 		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/trough": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-2.1.0.tgz",
+			"integrity": "sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/tslib": {
 			"version": "2.4.0",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
@@ -2168,6 +2981,87 @@
 			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
 			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
 		},
+		"node_modules/unified": {
+			"version": "11.0.4",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+			"integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"bail": "^2.0.0",
+				"devlop": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-plain-obj": "^4.0.0",
+				"trough": "^2.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit": {
+			"version": "5.0.0",
+			"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",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+			"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/uri-js": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -2178,6 +3072,33 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/vfile": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/w3c-keyname": {
 			"version": "2.2.8",
 			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -2248,6 +3169,28 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/yup": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/yup/-/yup-1.3.2.tgz",
+			"integrity": "sha512-6KCM971iQtJ+/KUaHdrhVr2LDkfhBtFPRnsG1P8F4q3uUVQ2RfEM9xekpha9aA4GXWJevjM10eDcPQ1FfWlmaQ==",
+			"dependencies": {
+				"property-expr": "^2.0.5",
+				"tiny-case": "^1.0.3",
+				"toposort": "^2.0.2",
+				"type-fest": "^2.19.0"
+			}
+		},
+		"node_modules/yup/node_modules/type-fest": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index 4784e03..2571cf4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-	"name": "obsidian-sample-plugin",
+	"name": "obsidian-intelligence",
 	"version": "1.0.0",
-	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
+	"description": "AI-powered assistants inside Obsidian",
 	"main": "main.js",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",
@@ -22,10 +22,16 @@
 		"typescript": "4.7.4"
 	},
 	"dependencies": {
+		"@popperjs/core": "^2.11.8",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.15",
+		"lucide-react": "^0.292.0",
 		"openai": "^4.16.1",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-markdown": "^9.0.1",
+		"react-spinners": "^0.13.8",
+		"react-tooltip": "^5.23.0",
+		"yup": "^1.3.2"
 	}
 }
diff --git a/src/files/testFile.md b/src/files/testFile.md
new file mode 100644
index 0000000..d23ede4
--- /dev/null
+++ b/src/files/testFile.md
@@ -0,0 +1,2 @@
+# This is a test file
+wow
\ No newline at end of file
diff --git a/src/ui/AppView.tsx b/src/ui/AppView.tsx
new file mode 100644
index 0000000..72a48f4
--- /dev/null
+++ b/src/ui/AppView.tsx
@@ -0,0 +1,83 @@
+import { ItemView, WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import { Root, createRoot } from "react-dom/client";
+import PluginView from "./PluginView";
+import { App } from "obsidian";
+import ObsidianIntelligence from "../../main";
+import OpenAI from "openai";
+
+export const VIEW_TYPE = "example-view";
+
+export const AppContext = React.createContext<App | undefined>(undefined);
+
+export const PluginContext = React.createContext<ObsidianIntelligence | undefined>(
+	undefined
+);
+
+export const OpenAIContext = React.createContext<OpenAI | undefined>(undefined);
+
+// export const CommandsContext = React.createContext<ICommandPayload | undefined>(undefined);
+
+export const useApp = (): App | undefined => {
+	return React.useContext(AppContext);
+};
+
+export const usePlugin = (): ObsidianIntelligence | undefined => {
+	return React.useContext(PluginContext);
+};
+
+export const useOpenAI = (): OpenAI | undefined => {
+	return React.useContext(OpenAIContext);
+};
+
+// export const useCommands = (): ICommandPayload | undefined => {
+//     return React.useContext(CommandsContext);
+// };
+
+export class AppView extends ItemView {
+	root: Root | null = null;
+	plugin: ObsidianIntelligence;
+	openAI: OpenAI;
+	// commands: ICommandPayload | undefined;
+
+	constructor(leaf: WorkspaceLeaf, plugin: ObsidianIntelligence) {
+		super(leaf);
+		this.plugin = plugin;
+		const openaiKey = plugin.settings.openaiKey;
+		const openAIInstance = new OpenAI({
+			apiKey: openaiKey,
+			dangerouslyAllowBrowser: true,
+		});
+		this.openAI = openAIInstance;
+		// this.addCommands();
+	}
+
+	getViewType() {
+		return VIEW_TYPE;
+	}
+
+	getDisplayText() {
+		return "Obsidian Intelligence";
+	}
+	getIcon(): string {
+		return "bot";
+	}
+
+	async onOpen() {
+		this.root = createRoot(this.containerEl.children[1]);
+		this.root.render(
+			<AppContext.Provider value={this.app}>
+				<PluginContext.Provider value={this.plugin}>
+					<OpenAIContext.Provider value={this.openAI}>
+						{/* <CommandsContext.Provider value={this.commands}> */}
+						<PluginView />
+						{/* </CommandsContext.Provider> */}
+					</OpenAIContext.Provider>
+				</PluginContext.Provider>
+			</AppContext.Provider>
+		);
+	}
+	async onClose() {
+		this.root?.unmount();
+	}
+}
diff --git a/src/ui/PluginView.tsx b/src/ui/PluginView.tsx
index 42f4147..125a6a0 100644
--- a/src/ui/PluginView.tsx
+++ b/src/ui/PluginView.tsx
@@ -1,42 +1,277 @@
-import React, { useState } from 'react';
+import OpenAI from 'openai';
+import React, { useEffect, useState, useCallback } from 'react';
+import Chatbox from './components/Chatbox';
+import { useOpenAI, usePlugin,  } from './AppView';
+import MessageInput from './components/MessageInput';
+// import FilesUploadUI from './components/FilesUploadUI';
+import AssistantManager from './components/AssistantManager';
+import { IThread, ThreadAnnotationFile } from './types';
+import { createNotice } from '@/utils/Logs';
+
+const listQueryOptions: OpenAI.Beta.Threads.MessageListParams = { order: 'asc'};
 
 const PluginView = () => {
-    const [messages, setMessages] = useState([
-        {
-            type: 'received',
-            text: `# Please send me a message indicating the following:\n- The type of writing (e.g. essay, blog post, etc.)\n- Topic\n- Audience\n- Length (in words)\n- Structure (optional) (e.g. introduction, body, conclusion)`
-        },
-        {
-            type: 'sent',
-            text: 'Hello, how are you?'
-        }
-    ]);
-    const [newMessage, setNewMessage] = useState('');
+    const plugin = usePlugin();
+    const openaiInstance = useOpenAI();
+    const [messages, setMessages] = useState<OpenAI.Beta.Threads.ThreadMessage[]>([]);
+    // const [files, setFiles] = useState<string[]>([]);
+    const [assistants, setAssistants] = useState<OpenAI.Beta.Assistant[]>([]);
+    const [threads, setThreads] = useState<IThread[]>([]);
+    const [activeAssistant, setActiveAssistant] = useState<OpenAI.Beta.Assistant | undefined>(undefined);
+    const [activeThread, setActiveThread] = useState<IThread | undefined>(undefined);
+    const [activeAssistantFiles, setActiveAssistantFiles] = useState<OpenAI.Files.FileObject[] | undefined>(undefined);
+    const [isResponding, setIsResponding] = useState(false);
 
-    const handleSend = () => {
-        setMessages([...messages, { type: 'sent', text: newMessage }]);
-        setNewMessage('');
+    useEffect(() => {
+        fetchThreads();
+        if (assistants.length < 1) {
+            
+            fetchAssistants();
+            fetchActiveConfiguration();
+        }
+    }, [plugin]);
+
+    useEffect(() => {
+        if (!activeAssistant) {
+            updateActiveAssistant(assistants?.[0]);
+        }
+    }, [assistants]);
+
+    useEffect(() => {
+        if (!activeThread) {
+            updateActiveThread(threads?.[0]);
+        }
+    }, [threads]);
+
+    const fetchAssistants = async () => {
+        if (!openaiInstance) {
+            return;
+        }
+        await openaiInstance.beta.assistants.list().then((res) => {
+            
+            // sort by name
+            const sortedAssistants = res.data.sort((a, b) => {
+                if (a.name && b.name && a.name < b.name) {
+                    return -1;
+                }
+                return 1;
+            });
+            
+            setAssistants(sortedAssistants);
+        });
     };
 
+    const fetchThreads = () => {
+        if (plugin) {
+            setThreads(plugin.settings.threads);
+        }
+    }
+
+    const fetchActiveConfiguration = () => {
+        if (plugin) {
+            const savedActiveAssistant = plugin.settings.activeAssistant;
+            if (savedActiveAssistant) {
+                updateActiveAssistant(savedActiveAssistant);
+            }
+            const savedActiveThread = plugin.settings.activeThread;
+            if (savedActiveThread) {
+                setActiveThread(savedActiveThread);
+            }
+        }
+    }
+
+    const updateActiveAssistant = async (assistant: OpenAI.Beta.Assistant) => {
+        if (plugin) {
+            plugin.settings.activeAssistant = assistant;
+            const assistantFiles = await fetchAssistantFiles();
+            updateActiveAssistantFiles(assistantFiles);
+            plugin.saveSettings();
+            setActiveAssistant(assistant);
+        }
+    }
+
+    const updateActiveAssistantFiles = (files: OpenAI.Files.FileObject[]) => {
+        if (plugin) {
+            plugin.settings.activeAssistantFiles = files;
+            plugin.saveSettings();
+            setActiveAssistantFiles(files);
+        }
+    }
+
+    const updateThreads = (threads: IThread[]) => {
+        if (plugin) {
+            plugin.settings.threads = threads;
+            plugin.saveSettings();
+            setThreads(threads);
+        }
+    }
+
+    
+    const fetchAssistantFiles = async (): Promise<OpenAI.Files.FileObject[] | []> => {
+        if (!openaiInstance || !plugin || !activeAssistant) {
+            return [];
+        }
+
+        try {
+            const assistantFilesResponse = await openaiInstance.beta.assistants.files.list(activeAssistant.id);
+
+            const innerFiles: OpenAI.Files.FileObject[] = [];
+
+            await Promise.all(
+                assistantFilesResponse.data.map(async (file) => {
+                    try {
+                        const fileInfoResponse = await openaiInstance.files.retrieve(file.id);
+                        
+                        innerFiles.push(fileInfoResponse);
+                        
+                    } catch (error) {
+                        console.error(error);
+                    }
+                })
+            );
+            
+            return innerFiles;
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+    };
+
+    const updateActiveThread = (thread: IThread) => {
+        if (plugin) {
+            
+            plugin.settings.activeThread = thread;
+            
+            plugin.saveSettings();
+            setActiveThread(thread);
+        }
+    }
+
+    const fetchMessages = async () => {
+        
+        if (!openaiInstance || !activeThread) {
+            return;
+        }
+        try {
+            const messages = await openaiInstance.beta.threads.messages.list(activeThread.id, listQueryOptions);
+            setMessages(messages.data);
+        } catch (e) {
+            createNotice('Thread expired or not found. Please select a new thread.');
+            //remove thread from list
+            const newThreads = threads.filter((t) => t.id !== activeThread.id);
+            setThreads(newThreads);
+            //update active thread
+            setActiveThread(newThreads?.[0]);
+            //save settings
+            if (plugin) {
+                plugin.settings.threads = newThreads;
+                plugin.settings.activeThread = newThreads?.[0];
+                plugin.saveSettings();
+            }
+        }
+    };
+
+    useEffect(() => {
+        fetchMessages();
+    }, [activeThread]);
+
+    const onMessageSend = useCallback(async (message: string) => {
+        
+        if (openaiInstance && activeThread && activeAssistant) {
+
+            const messageObject = await openaiInstance.beta.threads.messages.create(activeThread.id, {
+                role: "user",
+                content: message,
+            });
+
+            setMessages([...messages, messageObject]);
+
+            
+
+            const run = await openaiInstance.beta.threads.runs.create(activeThread.id, {
+                assistant_id: activeAssistant.id,
+            });
+
+            let runStatus = await openaiInstance.beta.threads.runs.retrieve(
+                activeThread.id,
+                run.id
+            );
+
+            // Initialize a counter and max attempts for the polling logic, and how long to wait each try
+            let attempts = 0;
+            const maxAttempts = 20;
+            const timoutWaitTimeMs = 2000;
+            setIsResponding(true);
+
+            while (runStatus.status !== "completed" && attempts < maxAttempts) {
+                await new Promise((resolve) => setTimeout(resolve, timoutWaitTimeMs));
+                runStatus = await openaiInstance.beta.threads.runs.retrieve(activeThread.id, run.id);
+                attempts++;
+            }
+
+            // Get latest messages
+            await openaiInstance.beta.threads.messages.list(activeThread.id, listQueryOptions).then((res) => {
+                setMessages(res.data);
+                const files: ThreadAnnotationFile[] = [];
+                //for each message in messages, if it has content.type = text, then access content.annotations.file_citation.file_id and get the file name from the active files list
+                res.data.forEach((message) => {
+                    if (message.content) {
+                        message.content.forEach((content) => {
+                            if (content.type === 'text') {
+                                content.text.annotations.forEach((annotation) => {
+                                    // @ts-ignore
+                                    if (annotation.file_citation) {
+                                        // @ts-ignore
+                                        const fileId: string = annotation.file_citation.file_id;
+                                        const file = activeAssistantFiles?.find((file) => file.id === fileId);
+                                        if (file) {
+                                            files.push({
+                                                fileId: fileId,
+                                                fileName: file.filename,
+                                            });
+                                        }
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+                if (files.length > 0) {
+                    const newThread: IThread = {
+                        ...activeThread,
+                        metadata: {
+                            ...activeThread.metadata,
+                            annotationFiles: files,
+                        }
+                    };
+                    const newThreads = threads.map((t) => t.id === activeThread.id ? newThread : t);
+                    updateThreads(newThreads);
+                    updateActiveThread(newThread);
+                }
+
+                setIsResponding(false);
+            });
+        }
+    }, [openaiInstance, activeThread, activeAssistant, messages]);
+
     return (
         <div className="agent-view-container">
-            <h2>Writing Assistant</h2>
-            <div className="chat-container">
-                {messages.map((message, index) => (
-                    <div key={index} className={`chat-message ${message.type}`}>
-                        <p className="text" dangerouslySetInnerHTML={{ __html: message.text.replace(/\n-/g, '<br/>-') }} />
-                    </div>
-                ))}
-            </div>
-            <div className="chat-input container">
-                <textarea 
-                    className="chat-input input"
-                    placeholder="Type your message here..." 
-                    value={newMessage} 
-                    onChange={e => setNewMessage(e.target.value)} 
+            <AssistantManager
+                assistants={assistants}
+                updateAssistants={setAssistants}
+                activeAssistant={activeAssistant}
+                updateActiveAssistant={updateActiveAssistant}
+                threads={threads}
+                updateThreads={updateThreads}
+                activeThread={activeThread}
+                updateActiveThread={updateActiveThread}/>
+            <Chatbox
+                messages={messages}
+                isResponding={isResponding}
+                annotationFiles={activeThread?.metadata?.annotationFiles}
                 />
-                <button className="chat-input send" onClick={handleSend}>Send</button>
-            </div>
+            <MessageInput onMessageSend={onMessageSend} />
+            {/* <FilesUploadUI files={files} onAddFile={onAddFile} onRemoveFile={onRemoveFile} /> */}
         </div>
     );
 };
diff --git a/src/ui/components/AssistantManager.tsx b/src/ui/components/AssistantManager.tsx
new file mode 100644
index 0000000..9dcfc7b
--- /dev/null
+++ b/src/ui/components/AssistantManager.tsx
@@ -0,0 +1,527 @@
+import React, { useEffect, useMemo } from "react";
+import OpenAI from "openai";
+import { useApp, useOpenAI, usePlugin } from "../AppView";
+import { IThread } from "../types";
+import DropdownSelect from "./DropdownSelect";
+import { MarkdownView } from "obsidian";
+import { Bot, MessageSquare, Plus, Pencil, Trash2 } from "lucide-react";
+import {
+	AssistantEditModal,
+	IAssistantEditModalValues,
+} from "./modals/AssistantEditModal";
+import {} from "./modals/AssistantEditModal";
+import {
+	ThreadEditModal,
+	IThreadEditModalValues,
+} from "./modals/ThreadEditModal";
+import { createNotice } from "@/utils/Logs";
+import { defaultAssistantInstructions } from "@/utils/templates";
+
+interface AssistantManagerProps {
+	assistants: OpenAI.Beta.Assistant[];
+	updateAssistants: (assistants: OpenAI.Beta.Assistant[]) => void;
+	threads: IThread[];
+	updateThreads: (threads: IThread[]) => void;
+	activeAssistant: OpenAI.Beta.Assistant | undefined;
+	updateActiveAssistant: (assistant: OpenAI.Beta.Assistant) => void;
+	activeThread: IThread | undefined;
+	updateActiveThread: (thread: IThread) => void;
+}
+
+const AssistantManager = ({
+	assistants,
+	updateAssistants,
+	threads,
+	updateThreads,
+	activeAssistant,
+	activeThread,
+	updateActiveAssistant,
+	updateActiveThread,
+}: AssistantManagerProps) => {
+	const app = useApp();
+	const plugin = usePlugin();
+	const openaiInstance = useOpenAI();
+
+	useEffect(() => {
+		if (!plugin || !app) {
+			return;
+		}
+
+		plugin.addCommand({
+			id: "create-assistant-from-active-note",
+			name: "Create Assistant from Active Note",
+			checkCallback: (checking: boolean) => {
+				// Conditions to check
+				const markdownView =
+					app.workspace.getActiveViewOfType(MarkdownView);
+				const openFile = markdownView?.file;
+
+				if (openFile) {
+					if (!checking) {
+						// const links = app.metadataCache.getFileCache(openFile)?.links?.map(
+						//     (link) => addFileType(truncateLink(link.link))
+						// ) || [];
+						const links = Object.keys(
+							app.metadataCache.resolvedLinks[openFile.path]
+						);
+						
+						//@ts-ignore
+						const backlinks = Object.keys(
+							app.metadataCache.getBacklinksForFile(openFile).data
+						).map((file) => file);
+						console.log(
+							"file metadata cache",
+							app.metadataCache.getCache(openFile.path)?.links
+						);
+						const currentFile = openFile.path;
+						const filesToUpload = new Set([
+							currentFile,
+							...links,
+							...backlinks,
+						]);
+						
+						handleCreateAssistant({
+							name: `${openFile.path} Assistant`,
+							instructions: defaultAssistantInstructions,
+							files: Array.from(filesToUpload)
+								.filter((file) => file.endsWith(".md"))
+								.map((file) => ({
+									filename: file,
+								})),
+						});
+					}
+					// This command will only show up in Command Palette when the check function returns true
+					return true;
+				}
+			},
+		});
+	}, [plugin]);
+
+	useEffect(() => {}, [plugin]);
+
+	const createThread = async () => {
+		if (!openaiInstance || !plugin) {
+			return;
+		}
+
+		const newThreadName = "New Thread";
+
+		await openaiInstance.beta.threads
+			.create({
+				metadata: {
+					name: newThreadName,
+				},
+			})
+			.then((res) => {
+				const newThread = {
+					...res,
+					metadata: {
+						name: newThreadName,
+					},
+				};
+				updateThreads([...threads, newThread]);
+				updateActiveThread(newThread);
+				plugin.saveSettings();
+			});
+	};
+
+	const editThread = async (values: IThreadEditModalValues) => {
+		if (!openaiInstance || !app || !activeThread) {
+			return;
+		}
+
+		const newThread = {
+			...activeThread,
+			metadata: {
+				name: values.metadata.name,
+			},
+		};
+
+		await openaiInstance.beta.threads
+			.update(activeThread.id, {
+				metadata: {
+					name: values.metadata.name,
+				},
+			})
+			.then((res) => {
+				updateThreads(
+					threads.map((thread) => {
+						if (thread.id === activeThread.id) {
+							return newThread;
+						}
+						return thread;
+					})
+				);
+				updateActiveThread(newThread);
+			});
+	};
+
+	const handleEditThread = async () => {
+		if (!openaiInstance || !app || !activeThread) {
+			return;
+		}
+
+		// Get the previous values of the thread
+		const previousValues = {
+			metadata: {
+				name: activeThread.metadata.name || "",
+			},
+		};
+
+		new ThreadEditModal({
+			app,
+			title: "Edit Thread",
+			submitButtonText: "Edit",
+			previousValues,
+			onSubmit: editThread,
+		}).open();
+	};
+
+	const deleteThread = async () => {
+		if (!openaiInstance || !plugin || !activeThread) {
+			return;
+		}
+
+		await openaiInstance.beta.threads
+			.del(activeThread.id)
+			.then((res) => {
+				const newThreadsList = threads.filter(
+					(thread) => thread.id !== activeThread.id
+				);
+				updateThreads(newThreadsList);
+				updateActiveThread(newThreadsList?.[0]);
+				plugin.saveSettings();
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	};
+
+	const createAssistant = async (values: IAssistantEditModalValues) => {
+		if (!openaiInstance || !app) {
+			return;
+		}
+
+		// use uploadFileToOpenAI to upload files to openai
+		const uploadedFiles: string[] = [];
+		await Promise.all(
+			values.files.map(async (file) => {
+				if (file.filename) {
+					const uploadedFile = await uploadFileToOpenAI(
+						file?.filename
+					);
+					
+					if (uploadedFile) {
+						
+						uploadedFiles.push(uploadedFile.id);
+					}
+				}
+			})
+		);
+
+		
+		await openaiInstance.beta.assistants
+			.create({
+				name: values.name,
+				description: values.description,
+				instructions: values.instructions,
+				tools: [{ type: "code_interpreter" }, { type: "retrieval" }],
+				model: "gpt-4-1106-preview",
+				file_ids: uploadedFiles,
+			})
+			.then((res) => {
+				createNotice(`Assistant "${values.name}" created`);
+				updateAssistants([...assistants, res]);
+				updateActiveAssistant(res);
+			});
+	};
+
+	const handleCreateAssistant = async (
+		assistant?: IAssistantEditModalValues
+	) => {
+		if (!openaiInstance || !app) {
+			return;
+		}
+		
+		// const assistant = await openaiInstance.beta.assistants.create({
+		//     name: "Math Tutor",
+		//     instructions:
+		//       "You are a personal math tutor. Write and run code to answer math questions.",
+		//     tools: [{ type: "code_interpreter" }],
+		//     model: "gpt-4-1106-preview",
+		// });
+		// setActiveAssistant(assistant);
+		new AssistantEditModal({
+			app,
+			title: "Create New Assistant",
+			submitButtonText: "Create",
+			previousValues: assistant,
+			onSubmit: createAssistant,
+		}).open();
+	};
+
+	const editAssistant = async (values: IAssistantEditModalValues) => {
+		if (!openaiInstance || !app || !activeAssistant) {
+			return;
+		}
+
+		// Check each values.files element to see if there is an id. If there is, then it is already uploaded to openai and we don't need to upload it again.
+		const filesToUpload: string[] = [];
+		const assistantFiles: string[] = [];
+
+		values.files.forEach((file) => {
+			
+			if (file.id) {
+				assistantFiles.push(file.id);
+			} else if (file.filename) {
+				filesToUpload.push(file.filename);
+			}
+		});
+
+		await Promise.all(
+			filesToUpload.map(async (file) => {
+				const uploadedFile = await uploadFileToOpenAI(file);
+
+				if (uploadedFile) {
+					assistantFiles.push(uploadedFile.id);
+				}
+			})
+		);
+
+		await openaiInstance.beta.assistants
+			.update(activeAssistant.id, {
+				name: values.name,
+				description: values.description,
+				instructions: values.instructions,
+				file_ids: assistantFiles,
+			})
+			.then((res) => {
+				updateActiveAssistant(res);
+				updateAssistants(
+					assistants.map((assistant) => {
+						if (assistant.id === activeAssistant.id) {
+							return res;
+						}
+						return assistant;
+					})
+				);
+			});
+	};
+
+	const handleEditAssistant = async () => {
+		if (!openaiInstance || !app || !activeAssistant) {
+			return;
+		}
+
+		const files = await getAssistantFiles();
+
+		const previousValues = {
+			name: activeAssistant.name || "",
+			description: activeAssistant.description || "",
+			instructions: activeAssistant.instructions || "",
+			files: files || [],
+		};
+
+		new AssistantEditModal({
+			app,
+			title: "Edit Assistant",
+			submitButtonText: "Edit",
+			previousValues,
+			onSubmit: editAssistant,
+		}).open();
+	};
+
+	const deleteAssistant = async () => {
+		if (!openaiInstance || !activeAssistant) {
+			return;
+		}
+
+		await openaiInstance.beta.assistants
+			.del(activeAssistant.id)
+			.then((res) => {
+				const newAssistantsList = assistants.filter(
+					(assistant) => assistant.id !== activeAssistant.id
+				);
+
+				updateAssistants(newAssistantsList);
+				updateActiveAssistant(newAssistantsList?.[0]);
+			});
+	};
+
+	const uploadFileToOpenAI = async (
+		fileName: string
+	): Promise<OpenAI.Files.FileObject | undefined> => {
+		if (!openaiInstance || !plugin || !app) {
+			return undefined;
+		}
+
+		const file = await app.vault.adapter.read(fileName);
+		const blob = new File([file], fileName, { type: "text/markdown" });
+
+		const returnedFile = await openaiInstance.files
+			.create({
+				purpose: "assistants",
+				file: blob,
+			})
+			.then((res) => {
+				return res;
+			})
+			.catch((error) => {
+				console.error(error);
+				return undefined;
+			});
+
+		return returnedFile;
+	};
+
+	// const attachFileToAssistant = async (assistantId: string, fileId: string) => {
+	//     //file id is file-CFBYJh1WUxRWdAtdaScVZHS7
+	//     //assistant id is asst_0HHHYCL2dgImUlXbZKDRjac0
+	//     if (!openaiInstance || !plugin) {
+	//         return;
+	//     }
+	//     await openaiInstance.beta.assistants.files.create(
+	//         assistantId,
+	//         {
+	//             file_id: fileId,
+	//         }
+	//     ).then((res) => {
+	//         // Handle the response
+
+	//     }).catch((error) => {
+	//         // Handle the error
+	//         console.error(error);
+	//     });
+	// };
+
+	const getAssistantFiles = async (): Promise<
+		OpenAI.Files.FileObject[] | []
+	> => {
+		if (!openaiInstance || !plugin || !activeAssistant) {
+			return [];
+		}
+
+		try {
+			const assistantFilesResponse =
+				await openaiInstance.beta.assistants.files.list(
+					activeAssistant?.id
+				);
+
+			const innerFiles: OpenAI.Files.FileObject[] = [];
+
+			await Promise.all(
+				assistantFilesResponse.data.map(async (file) => {
+					try {
+						const fileInfoResponse =
+							await openaiInstance.files.retrieve(file.id);
+
+						innerFiles.push(fileInfoResponse);
+					} catch (error) {
+						console.error(error);
+					}
+				})
+			);
+
+			return innerFiles;
+		} catch (error) {
+			console.error(error);
+			return [];
+		}
+	};
+
+	//format assistants into ISelectOption
+	const assistantOptions = useMemo(() => {
+		return assistants.map((assistant) => {
+			return {
+				label: assistant.name || "",
+				value: assistant.id,
+			};
+		});
+	}, [assistants]);
+
+	const threadOptions = useMemo(() => {
+		return threads.map((thread) => {
+			return {
+				label: thread.metadata.name,
+				value: thread.id,
+			};
+		});
+	}, [threads]);
+
+	const onUpdateActiveAssistant = (assistantId: string) => {
+		if (!openaiInstance || !activeAssistant) {
+			return;
+		}
+		
+		const assistant = assistants.find(
+			(assistant) => assistant.id === assistantId
+		);
+
+		updateActiveAssistant(assistant ?? assistants?.[0]);
+	};
+
+	const onUpdateActiveThread = (threadId: string) => {
+		if (!openaiInstance || !activeThread) {
+			return;
+		}
+		const newActiveThread = threads.find(
+			(thread) => thread.id === threadId
+		);
+		updateActiveThread(newActiveThread ?? activeThread);
+	};
+
+	
+
+	return (
+		<div className="chat-top-section-container">
+			<div className="dropdowns-container">
+				<div className="dropdown-container">
+					<Bot size={16} />
+					<DropdownSelect
+						items={assistantOptions}
+						onChange={onUpdateActiveAssistant}
+						activeItem={activeAssistant?.id || ""}
+					/>
+					<div className="dropdown-buttons-container">
+						<button className="create" onClick={deleteAssistant}>
+							<Trash2 size={16} />
+						</button>
+						<button
+							className="create"
+							onClick={handleEditAssistant}
+						>
+							<Pencil size={16} />
+						</button>
+						<button
+							className="create"
+							onClick={() => handleCreateAssistant()}
+						>
+							<Plus size={16} />
+						</button>
+					</div>
+				</div>
+				<div className="dropdown-container">
+					<MessageSquare size={16} />
+					<DropdownSelect
+						items={threadOptions}
+						onChange={onUpdateActiveThread}
+						activeItem={activeThread?.id || ""}
+					/>
+					<div className="dropdown-buttons-container">
+						<button className="create" onClick={deleteThread}>
+							<Trash2 size={16} />
+						</button>
+						<button className="create" onClick={handleEditThread}>
+							<Pencil size={16} />
+						</button>
+						<button className="create" onClick={createThread}>
+							<Plus size={16} />
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default AssistantManager;
diff --git a/src/ui/components/Chatbox.tsx b/src/ui/components/Chatbox.tsx
new file mode 100644
index 0000000..d60059c
--- /dev/null
+++ b/src/ui/components/Chatbox.tsx
@@ -0,0 +1,240 @@
+import React, { CSSProperties, useEffect, useRef, useState } from "react";
+import OpenAI from "openai";
+import { ChevronDown, ClipboardCopy } from "lucide-react";
+import BeatLoader from "react-spinners/BeatLoader";
+import { Tooltip } from "react-tooltip";
+import Markdown from "react-markdown";
+import { useApp } from "../AppView";
+import { createNotice } from "@/utils/Logs";
+import { TFile } from "obsidian";
+import { ThreadAnnotationFile } from "../types";
+
+const override: CSSProperties = {
+	display: "block",
+	margin: "0 auto",
+	borderColor: "white",
+};
+
+interface ChatboxProps {
+	messages: OpenAI.Beta.Threads.ThreadMessage[];
+	isResponding: boolean;
+	annotationFiles?: ThreadAnnotationFile[];
+}
+
+const Chatbox = ({ annotationFiles, isResponding, messages }: ChatboxProps) => {
+	const app = useApp();
+	const messagesContainerRef = useRef<HTMLDivElement>(null);
+	const [showScrollButton, setShowScrollButton] = useState(false);
+
+	useEffect(() => {
+		if (messagesContainerRef.current) {
+			messagesContainerRef.current.scrollTop =
+				messagesContainerRef.current.scrollHeight;
+			checkScrollButtonVisibility();
+		}
+
+		const handleScroll = () => {
+			checkScrollButtonVisibility();
+		};
+
+		if (messagesContainerRef.current) {
+			scrollToBottom();
+			messagesContainerRef.current.addEventListener(
+				"scroll",
+				handleScroll
+			);
+		}
+
+		return () => {
+			if (messagesContainerRef.current) {
+				messagesContainerRef.current.removeEventListener(
+					"scroll",
+					handleScroll
+				);
+			}
+		};
+	}, [isResponding, messagesContainerRef.current]);
+
+	useEffect(() => {
+		// scroll to bottom when switching to different thread
+		if (showScrollButton) {
+			scrollToBottom();
+			setShowScrollButton(false);
+		}
+	}, [messages]);
+
+	const getGroupMessages = () =>
+		messages.map((message, index) => (
+			<div key={index} className={`chat-message ${message.role}`}>
+				{message.content.map((content, index) => {
+					if (content.type === "text") {
+						const getMessageText = () => {
+							const annotationsTexts =
+								content.text.annotations.map(
+									(annotation: any) => annotation.text
+								);
+							let text = content.text.value;
+
+							annotationsTexts.forEach(
+								(annotationText: string, index: number) => {
+									const annotationIndex = index;
+									const regex = new RegExp(
+										annotationText,
+										"g"
+									);
+									text = text.replace(
+										regex,
+										`[^${annotationIndex}]`
+									);
+								}
+							);
+
+							return text;
+						};
+
+						const renderAnnotation = (
+							annotation: any,
+							index: number
+						) => {
+							const { file_citation } = annotation;
+							const fileId = file_citation?.file_id;
+							const fileName = annotationFiles?.find(
+								(file) => file.fileId === fileId
+							)?.fileName;
+							let quote = file_citation?.quote;
+
+							// Check if quote has list markdown syntax
+							if (quote && quote.includes("- ")) {
+								quote = quote.replace(/- /g, "\n- ");
+							}
+
+							const handleAnnotationClick = () => {
+								// open new tab and then navigate to fil
+								console.log(
+									"handleAnnotationClick",
+									app,
+									fileName
+								);
+								if (app && fileName) {
+									const file =
+										app.vault.getAbstractFileByPath(
+											fileName
+										);
+									if (file && file instanceof TFile) {
+										app.workspace.getLeaf().openFile(file);
+									}
+									// add leaf to parent
+								}
+							};
+
+							return (
+								<div key={index}>
+									<a
+										className="annotation"
+										data-tooltip-id={`tooltip-${index}`}
+										onClick={handleAnnotationClick}
+									>
+										[^{index}]
+									</a>
+									<Tooltip id={`tooltip-${index}`}>
+										<div className="annotation-tooltip-container">
+											<strong>{fileName}</strong>
+											<Markdown>{quote}</Markdown>
+										</div>
+									</Tooltip>
+								</div>
+							);
+						};
+
+						const renderContent = () => {
+							const text = getMessageText();
+							const copyText = () => {
+								navigator.clipboard.writeText(text);
+								createNotice("Copied to clipboard!", 2000);
+							};
+							return (
+								<div key={index} className="message-content">
+									{
+										<Markdown className="message-text">
+											{text}
+										</Markdown>
+									}
+									<div className="message-footer">
+										{message.role === "assistant" && (
+											<div className="copy-icon-container">
+												<ClipboardCopy
+													className="copy-icon"
+													color={"#ffffff"}
+													size={16}
+													onClick={copyText}
+												/>
+											</div>
+										)}
+										{content.text.annotations.map(
+											(annotation: any, index: number) =>
+												renderAnnotation(
+													annotation,
+													index
+												)
+										)}
+									</div>
+								</div>
+							);
+						};
+
+						return (
+							<div key={index} className="message-content">
+								{renderContent()}
+							</div>
+						);
+					}
+				})}
+			</div>
+		));
+
+	const scrollToBottom = () => {
+		if (messagesContainerRef.current) {
+			messagesContainerRef.current.scrollTop =
+				messagesContainerRef.current.scrollHeight;
+			checkScrollButtonVisibility();
+		}
+	};
+
+	const checkScrollButtonVisibility = () => {
+		if (messagesContainerRef.current) {
+			const containerHeight = messagesContainerRef.current.offsetHeight;
+			const scrollHeight = messagesContainerRef.current.scrollHeight;
+			const scrollTop = messagesContainerRef.current.scrollTop;
+			const gap = scrollHeight - scrollTop - containerHeight;
+			setShowScrollButton(gap > containerHeight);
+		}
+	};
+
+	return (
+		<div className="chatbox-container">
+			<div ref={messagesContainerRef} className="messages-container">
+				{getGroupMessages()}
+				{isResponding && (
+					<div className="loader-container">
+						<BeatLoader
+							color="#ffffff"
+							loading={true}
+							cssOverride={override}
+							size={12}
+						/>
+					</div>
+				)}
+			</div>
+			{showScrollButton && (
+				<button
+					className="scroll-to-bottom-button"
+					onClick={scrollToBottom}
+				>
+					<ChevronDown size={16} />
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default Chatbox;
diff --git a/src/ui/components/DropdownSelect.tsx b/src/ui/components/DropdownSelect.tsx
new file mode 100644
index 0000000..534ab01
--- /dev/null
+++ b/src/ui/components/DropdownSelect.tsx
@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from "react";
+import { DropdownComponent } from "obsidian";
+
+interface ISelectOption {
+	label: string;
+	value: string;
+}
+interface DropdownSelectProps {
+	items: ISelectOption[];
+	onChange: (item: string) => void;
+	activeItem: string;
+}
+
+const DropdownSelect: React.FC<DropdownSelectProps> = ({
+	items,
+	onChange,
+	activeItem,
+}) => {
+	const selectElementRef = useRef<HTMLSelectElement>(null);
+
+	useEffect(() => {
+		if (selectElementRef.current) {
+			new DropdownComponent(selectElementRef.current);
+		}
+	}, [selectElementRef.current]);
+
+	return (
+		<select
+			ref={selectElementRef}
+			onChange={(e) => onChange(e.target.value)}
+			value={activeItem}
+			className={"dropdown-select"}
+		>
+			{items.map((item) => (
+				<option className="" key={item.value} value={item.value}>
+					{item.label}
+				</option>
+			))}
+		</select>
+	);
+};
+
+export default DropdownSelect;
diff --git a/src/ui/components/FilesUploadUI.tsx b/src/ui/components/FilesUploadUI.tsx
new file mode 100644
index 0000000..4c20a64
--- /dev/null
+++ b/src/ui/components/FilesUploadUI.tsx
@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useApp } from "../AppView";
+import { FileSuggest } from "./suggesters/FileSuggester";
+import { ClipboardCopy, ChevronDown, ChevronRight, Trash } from "lucide-react";
+
+interface FilesUploadUIProps {
+	files: string[];
+	onAddFile: (file: string) => void;
+	onRemoveFile: (file: string) => void;
+}
+
+const FilesUploadUI = ({
+	files,
+	onAddFile,
+	onRemoveFile,
+}: FilesUploadUIProps) => {
+	const [isExpanded, setIsExpanded] = useState(true);
+
+	const [newFile, setNewFile] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const app = useApp();
+
+	if (!app) {
+		return null;
+	}
+
+	const copyTitle = (file: string) => {
+		navigator.clipboard.writeText(`[[${file}]]`);
+	};
+
+	useEffect(() => {
+		if (inputRef.current) {
+			new FileSuggest(app, inputRef.current, handleAddFile);
+		}
+	}, [inputRef.current]);
+
+	const handleAddFile = (file: string) => {
+		onAddFile(file);
+		setNewFile("");
+	};
+
+	return (
+		<div className="collapsible-container">
+			<div
+				className="collapsible-header"
+				onClick={() => setIsExpanded(!isExpanded)}
+			>
+				<span className="arrow">
+					{isExpanded ? (
+						<ChevronRight size={16} />
+					) : (
+						<ChevronDown size={16} />
+					)}
+				</span>
+				<span className="label">Uploaded Files</span>
+			</div>
+			{isExpanded && (
+				<div className="collapsible-content">
+					<div className="file-input-container">
+						<input
+							ref={inputRef}
+							type="text"
+							placeholder="Add a file..."
+							value={newFile}
+							onChange={(e) => setNewFile(e.target.value)}
+						/>
+						{/* <button onClick={() => handleAddFile(newFile)}>
+                            <Plus size={16} />
+                        </button> */}
+					</div>
+					<div className="files-list">
+						{files.map(
+							(file, index) => (
+								,
+								(
+									<div key={index} className="file-row">
+										<span>{file}</span>
+										<div className="button-group">
+											<button
+												onClick={() => copyTitle(file)}
+											>
+												<ClipboardCopy size={16} />
+											</button>
+											<button
+												onClick={() =>
+													onRemoveFile(file)
+												}
+											>
+												<Trash size={16} />
+											</button>
+										</div>
+									</div>
+								)
+							)
+						)}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default FilesUploadUI;
diff --git a/src/ui/components/MessageInput.tsx b/src/ui/components/MessageInput.tsx
new file mode 100644
index 0000000..47ab83d
--- /dev/null
+++ b/src/ui/components/MessageInput.tsx
@@ -0,0 +1,31 @@
+import { SendHorizontal } from "lucide-react";
+import React, { useState } from "react";
+
+interface MessageInputProps {
+	onMessageSend: (message: string) => void;
+}
+
+const MessageInput: React.FC<MessageInputProps> = ({ onMessageSend }) => {
+	const [newMessage, setNewMessage] = useState("");
+
+	const handleSend = () => {
+		onMessageSend(newMessage);
+		setNewMessage("");
+	};
+
+	return (
+		<div className="message-input container">
+			<textarea
+				className="message-input input"
+				placeholder="Type your message here..."
+				value={newMessage}
+				onChange={(e) => setNewMessage(e.target.value)}
+			/>
+			<button className="message-input send" onClick={handleSend}>
+				<SendHorizontal size={16} />
+			</button>
+		</div>
+	);
+};
+
+export default MessageInput;
diff --git a/src/ui/components/modals/AssistantEditModal.ts b/src/ui/components/modals/AssistantEditModal.ts
new file mode 100644
index 0000000..9f42862
--- /dev/null
+++ b/src/ui/components/modals/AssistantEditModal.ts
@@ -0,0 +1,216 @@
+import { App, ButtonComponent, Modal, Notice, Setting } from 'obsidian';
+import OpenAI from 'openai';
+import { FileSuggest } from '../suggesters/FileSuggester';
+import * as yup from 'yup';
+import { defaultAssistantInstructions } from '../../../utils/templates'
+
+interface AssistantEditModalProps {
+    app: App,
+    title: string,
+    submitButtonText?: string,
+    previousValues?: IAssistantEditModalValues,
+    onSubmit: (values: IAssistantEditModalValues) => void,
+}
+
+export interface IAssistantEditModalValues {
+    name: string;
+    description?: string;
+    instructions: string;
+    files: Partial<OpenAI.Files.FileObject>[];
+    [key: string]: unknown;
+}
+
+export class AssistantEditModal extends Modal {
+    private values: IAssistantEditModalValues = {
+        name: '',
+        description: '',
+        instructions: defaultAssistantInstructions,
+        files: [],
+    };
+    private title: string;
+    private submitButtonText: string;
+    private onSubmit: (values: IAssistantEditModalValues) => void;
+    private fileListDiv: HTMLElement;
+    private fileCountText: HTMLElement;
+
+    constructor(props: AssistantEditModalProps) {
+        super(props.app);
+        this.title = props.title;
+        this.submitButtonText = props.submitButtonText || 'Submit';
+        if (props.previousValues) {
+            this.values = props.previousValues;
+        }
+        this.onSubmit = props.onSubmit;
+        this.display();
+    }
+
+    display() {
+        const { contentEl } = this;
+
+        contentEl.createEl('h1', { text: this.title });
+
+        this.addNameSetting(contentEl);
+        this.addDescriptionSetting(contentEl);
+        this.addInstructionsSetting(contentEl);
+        this.addFileIdsSetting(contentEl);
+        this.addSubmitButton(contentEl);
+    }
+
+    addNameSetting(contentEl: HTMLElement) {
+        new Setting(contentEl)
+            .setName('Name (required)')
+            .setDesc('The name of the assistant')
+            .addText(text => {
+                text.setPlaceholder('Enter name...')
+                    .onChange((value) => {
+                        this.values.name = value;
+                    })
+                    .setValue(this.values.name);
+            });
+    }
+
+    addDescriptionSetting(contentEl: HTMLElement) {
+        new Setting(contentEl)
+            .setName('Description')
+            .setDesc('The description of the assistant')
+            .setClass('form-setting-textarea')
+            .addTextArea(text => {
+                text.setPlaceholder('Enter description...')
+                    .onChange((value) => {
+                        this.values.description = value;
+                    })
+                    .setValue(this.values.description || '');
+            });
+    }
+
+    addInstructionsSetting(contentEl: HTMLElement) {
+        new Setting(contentEl)
+            .setName('Instructions (required)')
+            .setDesc('The instructions you want the assistant to follow')
+            .setClass('form-setting-textarea')
+            .addTextArea(text => {
+                text.setPlaceholder('Enter instructions...')
+                    .onChange((value) => {
+                        this.values.instructions = value;
+                    })
+                    .setValue(this.values.instructions);
+            });
+    }
+
+    addFileIdsSetting(contentEl: HTMLElement) {
+        // Function to add a file to the list
+
+        const addFileToList = (fileName: string) => {
+
+
+            // if filename already is in values, replace it. this prevents duplicates and allows for re-uploading
+            const fileIndex: number = this.values.files && this.values.files.findIndex(file => file.filename === fileName);
+            if (fileIndex !== -1) {
+                this.values.files[fileIndex] = {
+                    filename: fileName,
+                };
+                return;
+            }
+
+            this.values.files.push({
+                filename: fileName,
+            });
+            updateFileCountText();
+            createFileListElement(fileName);
+        };
+
+        const updateFileCountText = () => {
+            this.fileCountText.setText(`Files Uploaded (${this.values.files.length}/20)`);
+        }
+
+        const createFileListElement = (fileName: string) => {
+            const fileDiv = this.fileListDiv.createDiv({ cls: 'file-item' });
+            fileDiv.createEl('span', { text: fileName });
+            
+
+            new ButtonComponent(fileDiv)
+                .setIcon('trash-2')
+                .setClass('remove-button')
+                .onClick(() => {
+                    fileDiv.remove();
+                    // Remove the file from the values object
+                    const file = this.values.files.find(file => file.filename === fileName);
+                    if (file) {
+                        this.values.files.remove(file);
+                        updateFileCountText();
+                    }
+                });
+        };
+
+        new Setting(contentEl)
+            .setName(`Files`)
+            .setDesc('The files uploaded to the assistant (not real-time synced, so you will need to re-upload). Max 20.')
+            .addSearch(search => {
+                search.setPlaceholder('Enter file IDs separated by commas...')
+                // .onChange((value) => {
+                
+                //     this.values.file_ids.push(value);
+                // });
+
+                new FileSuggest(this.app, search.inputEl, addFileToList);
+            });
+
+        // Add a div to hold the list of selected files
+        this.fileCountText = contentEl.createEl('h6');
+        updateFileCountText();
+        this.fileListDiv = contentEl.createDiv({ cls: 'file-list' });
+
+
+        // Add the files that were already selected
+        this.values.files.forEach(file => {
+            
+            if (file.filename) {
+                createFileListElement(file.filename);
+            }
+        });
+    }
+
+    addSubmitButton(contentEl: HTMLElement) {
+
+        const validationSchema = yup.object().shape({
+            name: yup.string().required('Name is required'),
+            instructions: yup.string().required('Instructions are required'),
+            files: yup.array().max(20, 'Files cannot exceed 20'),
+        });
+
+        const checkRequiredFields = async (): Promise<string[]> => {
+            try {
+                await validationSchema.validate(this.values, { abortEarly: false });
+                return [];
+            } catch (error) {
+                if (error instanceof yup.ValidationError) {
+                    return error.inner.map((err) => err.message) as string[];
+                }
+                throw error;
+            }
+        };
+
+        const handleSubmit = async () => {
+            const missingFields = await checkRequiredFields();
+            
+            if (missingFields.length > 0) {
+                new Notice(`Submit Error: \n${missingFields.join('\n')}`);
+                return;
+            }
+            this.onSubmit(this.values);
+
+            this.onClose();
+            this.close();
+        }
+        const modalFooterEl = contentEl.createDiv({ cls: 'modal-footer' });
+        new ButtonComponent(modalFooterEl)
+            .setButtonText(this.submitButtonText)
+            .setClass('form-submit-button')
+            .onClick(() => {
+                handleSubmit();
+            });
+    }
+
+    onClose() {
+    }
+}
diff --git a/src/ui/components/modals/ThreadEditModal.ts b/src/ui/components/modals/ThreadEditModal.ts
new file mode 100644
index 0000000..ee0767e
--- /dev/null
+++ b/src/ui/components/modals/ThreadEditModal.ts
@@ -0,0 +1,98 @@
+import { App, ButtonComponent, Modal, Notice, Setting } from 'obsidian';
+import * as yup from 'yup';
+
+interface ThreadEditModalProps {
+    app: App,
+    title: string,
+    submitButtonText?: string,
+    previousValues?: IThreadEditModalValues,
+    onSubmit: (values: IThreadEditModalValues) => void,
+}
+
+export interface IThreadEditModalValues {
+    metadata: {
+        name: string;
+        [key: string]: unknown;
+    },
+    [key: string]: unknown;
+}
+
+export class ThreadEditModal extends Modal {
+    private values: IThreadEditModalValues = {
+        metadata: {
+            name: '',
+        },
+    };
+    private title: string;
+    private submitButtonText: string;
+    private onSubmit: (values: IThreadEditModalValues) => void;
+
+    constructor(props: ThreadEditModalProps) {
+        super(props.app);
+        this.title = props.title;
+        this.submitButtonText = props.submitButtonText || 'Submit';
+        if (props.previousValues) {
+            this.values = props.previousValues;
+        }
+        this.onSubmit = props.onSubmit;
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+
+        contentEl.createEl('h1', { text: this.title });
+
+        // Create name input
+        new Setting(contentEl)
+            .setName('Name')
+            .setDesc('The name of the thread')
+            .addText(text => {
+                text.setPlaceholder('Enter thread name...')
+                    .onChange((value) => {
+                        this.values.metadata.name = value;
+                    })
+                    .setValue(this.values.metadata.name);
+            });
+
+
+        const validationSchema = yup.object().shape({
+            metadata: yup.object().shape({
+                name: yup.string().required('Name is required'),
+            }),
+        });
+
+        const checkRequiredFields = async (): Promise<string[]> => {
+            try {
+                await validationSchema.validate(this.values, { abortEarly: false });
+                return [];
+            } catch (error) {
+                if (error instanceof yup.ValidationError) {
+                    return error.inner.map((err) => err.message) as string[];
+                }
+                throw error;
+            }
+        };
+
+        const handleSubmit = async () => {
+            const missingFields = await checkRequiredFields();
+            
+            if (missingFields.length > 0) {
+                new Notice(`Submit Error: \n${missingFields.join('\n')}`);
+                return;
+            }
+            this.onSubmit(this.values);
+            this.onClose();
+            this.close();
+        };
+        const modalFooterEl = contentEl.createDiv({ cls: 'modal-footer' });
+        new ButtonComponent(modalFooterEl)
+            .setButtonText(this.submitButtonText)
+            .setClass('form-submit-button')
+            .onClick(() => {
+                handleSubmit();
+            });
+    }
+
+    onClose() {
+    }
+}
diff --git a/src/ui/components/suggesters/FileSuggester.ts b/src/ui/components/suggesters/FileSuggester.ts
new file mode 100644
index 0000000..6140d81
--- /dev/null
+++ b/src/ui/components/suggesters/FileSuggester.ts
@@ -0,0 +1,51 @@
+// Credits go to Liam's Periodic Notes Plugin: https://github.com/liamcain/obsidian-periodic-notes
+
+import { App, TAbstractFile, TFile } from "obsidian";
+import { TextInputSuggest } from "./suggest";
+import { get_tfiles_from_folder } from "@/utils/utils";
+
+export class FileSuggest extends TextInputSuggest<TFile> {
+    private onSelect: (file: string) => void;
+
+    constructor(
+        app: App,
+        public inputEl: HTMLInputElement,
+        onSelect: (file: string) => void
+
+    ) {
+        super(app, inputEl);
+        this.onSelect = onSelect;
+    }
+
+    getSuggestions(input_str: string): TFile[] {
+        //TODO: allow other file types
+        const all_files = get_tfiles_from_folder('', 'md');
+        if (!all_files) {
+            return [];
+        }
+
+        const files: TFile[] = [];
+        const lower_input_str = input_str.toLowerCase();
+
+        all_files.forEach((file: TAbstractFile) => {
+            if (
+                file instanceof TFile &&
+                file.extension === "md" &&
+                file.path.toLowerCase().contains(lower_input_str)
+            ) {
+                files.push(file);
+            }
+        });
+
+        return files;
+    }
+
+    renderSuggestion(file: TFile, el: HTMLElement): void {
+        el.setText(file.path);
+    }
+
+    selectSuggestion(file: TFile): void {
+        this.onSelect(file.path);
+        this.close();
+    }
+}
diff --git a/src/ui/components/suggesters/suggest.ts b/src/ui/components/suggesters/suggest.ts
new file mode 100644
index 0000000..e0839dc
--- /dev/null
+++ b/src/ui/components/suggesters/suggest.ts
@@ -0,0 +1,204 @@
+// Credits go to Liam's Periodic Notes Plugin: https://github.com/liamcain/obsidian-periodic-notes
+
+import { ISuggestOwner, Scope } from "obsidian";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
+import { App } from "obsidian";
+
+const wrapAround = (value: number, size: number): number => {
+    return ((value % size) + size) % size;
+};
+
+class Suggest<T> {
+    private owner: ISuggestOwner<T>;
+    private values: T[];
+    private suggestions: HTMLDivElement[];
+    private selectedItem: number;
+    private containerEl: HTMLElement;
+
+    constructor(
+        owner: ISuggestOwner<T>,
+        containerEl: HTMLElement,
+        scope: Scope
+    ) {
+        this.owner = owner;
+        this.containerEl = containerEl;
+
+        containerEl.on(
+            "click",
+            ".suggestion-item",
+            this.onSuggestionClick.bind(this)
+        );
+        containerEl.on(
+            "mousemove",
+            ".suggestion-item",
+            this.onSuggestionMouseover.bind(this)
+        );
+
+        scope.register([], "ArrowUp", (event) => {
+            if (!event.isComposing) {
+                this.setSelectedItem(this.selectedItem - 1, true);
+                return false;
+            }
+        });
+
+        scope.register([], "ArrowDown", (event) => {
+            if (!event.isComposing) {
+                this.setSelectedItem(this.selectedItem + 1, true);
+                return false;
+            }
+        });
+
+        scope.register([], "Enter", (event) => {
+            if (!event.isComposing) {
+                this.useSelectedItem(event);
+                return false;
+            }
+        });
+    }
+
+    onSuggestionClick(event: MouseEvent, el: HTMLDivElement): void {
+        event.preventDefault();
+
+        const item = this.suggestions.indexOf(el);
+        this.setSelectedItem(item, false);
+        this.useSelectedItem(event);
+    }
+
+    onSuggestionMouseover(_event: MouseEvent, el: HTMLDivElement): void {
+        const item = this.suggestions.indexOf(el);
+        this.setSelectedItem(item, false);
+    }
+
+    setSuggestions(values: T[]) {
+        this.containerEl.empty();
+        const suggestionEls: HTMLDivElement[] = [];
+
+        values.forEach((value) => {
+            const suggestionEl = this.containerEl.createDiv("suggestion-item");
+            this.owner.renderSuggestion(value, suggestionEl);
+            suggestionEls.push(suggestionEl);
+        });
+
+        this.values = values;
+        this.suggestions = suggestionEls;
+        this.setSelectedItem(0, false);
+    }
+
+    useSelectedItem(event: MouseEvent | KeyboardEvent) {
+        const currentValue = this.values[this.selectedItem];
+        if (currentValue) {
+            this.owner.selectSuggestion(currentValue, event);
+        }
+    }
+
+    setSelectedItem(selectedIndex: number, scrollIntoView: boolean) {
+        const normalizedIndex = wrapAround(
+            selectedIndex,
+            this.suggestions.length
+        );
+        const prevSelectedSuggestion = this.suggestions[this.selectedItem];
+        const selectedSuggestion = this.suggestions[normalizedIndex];
+
+        prevSelectedSuggestion?.removeClass("is-selected");
+        selectedSuggestion?.addClass("is-selected");
+
+        this.selectedItem = normalizedIndex;
+
+        if (scrollIntoView) {
+            selectedSuggestion.scrollIntoView(false);
+        }
+    }
+}
+
+export abstract class TextInputSuggest<T> implements ISuggestOwner<T> {
+    protected inputEl: HTMLInputElement | HTMLTextAreaElement;
+
+    private popper: PopperInstance;
+    private scope: Scope;
+    private suggestEl: HTMLElement;
+    private suggest: Suggest<T>;
+    private app: App;
+
+    constructor(app: App, inputEl: HTMLInputElement | HTMLTextAreaElement) {
+        this.app = app;
+        this.inputEl = inputEl;
+        this.scope = new Scope();
+
+        this.suggestEl = createDiv("suggestion-container");
+        const suggestion = this.suggestEl.createDiv("suggestion");
+        this.suggest = new Suggest(this, suggestion, this.scope);
+
+        this.scope.register([], "Escape", this.close.bind(this));
+
+        this.inputEl.addEventListener("input", this.onInputChanged.bind(this));
+        this.inputEl.addEventListener("focus", this.onInputChanged.bind(this));
+        this.inputEl.addEventListener("blur", this.close.bind(this));
+        this.suggestEl.on(
+            "mousedown",
+            ".suggestion-container",
+            (event: MouseEvent) => {
+                event.preventDefault();
+            }
+        );
+    }
+
+    onInputChanged(): void {
+        const inputStr = this.inputEl.value;
+        const suggestions = this.getSuggestions(inputStr);
+
+        if (!suggestions) {
+            this.close();
+            return;
+        }
+
+        if (suggestions.length > 0) {
+            this.suggest.setSuggestions(suggestions);
+            // @ts-ignore
+            this.open(this.app.dom.appContainerEl, this.inputEl);
+        } else {
+            this.close();
+        }
+    }
+
+    open(container: HTMLElement, inputEl: HTMLElement): void {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.app.keymap.pushScope(this.scope);
+
+        container.appendChild(this.suggestEl);
+        this.popper = createPopper(inputEl, this.suggestEl, {
+            placement: "bottom-start",
+            modifiers: [
+                {
+                    name: "sameWidth",
+                    enabled: true,
+                    fn: ({ state, instance }) => {
+                        // Note: positioning needs to be calculated twice -
+                        // first pass - positioning it according to the width of the popper
+                        // second pass - position it with the width bound to the reference element
+                        // we need to early exit to avoid an infinite loop
+                        const targetWidth = `${state.rects.reference.width}px`;
+                        if (state.styles.popper.width === targetWidth) {
+                            return;
+                        }
+                        state.styles.popper.width = targetWidth;
+                        instance.update();
+                    },
+                    phase: "beforeWrite",
+                    requires: ["computeStyles"],
+                },
+            ],
+        });
+    }
+
+    close(): void {
+        app.keymap.popScope(this.scope);
+
+        this.suggest.setSuggestions([]);
+        if (this.popper) this.popper.destroy();
+        this.suggestEl.detach();
+    }
+
+    abstract getSuggestions(inputStr: string): T[];
+    abstract renderSuggestion(item: T, el: HTMLElement): void;
+    abstract selectSuggestion(item: T): void;
+}
diff --git a/src/ui/types.ts b/src/ui/types.ts
new file mode 100644
index 0000000..6fe301f
--- /dev/null
+++ b/src/ui/types.ts
@@ -0,0 +1,12 @@
+import OpenAI from "openai";
+export interface IThread extends OpenAI.Beta.Thread {
+	metadata: {
+		name: string;
+		annotationFiles?: ThreadAnnotationFile[];
+	}
+}
+
+export interface ThreadAnnotationFile {
+	fileName: string;
+	fileId: string;
+}
\ No newline at end of file
diff --git a/src/ui/window.tsx b/src/ui/window.tsx
deleted file mode 100644
index 9b12dd9..0000000
--- a/src/ui/window.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ItemView,WorkspaceLeaf } from "obsidian";
-import * as React from "react";
-import { Root, createRoot } from "react-dom/client";
-import PluginView from './PluginView';
-import { App } from "obsidian";
-import MyPlugin from '../../main'
-
-
-export const VIEW_TYPE = "example-view";
-
-export const AppContext = React.createContext<App | undefined>(undefined);
-
-export const useApp = (): App | undefined => {
-    return React.useContext(AppContext);
-};
-
-export class AppView extends ItemView {
-    root: Root | null = null;
-    plugin: MyPlugin;
-    constructor(leaf: WorkspaceLeaf, plugin: MyPlugin) {
-        super(leaf)
-        this.plugin = plugin
-    }
-
-    getViewType() {
-        return VIEW_TYPE
-    }
-
-    getDisplayText() {
-        return "Habitica Pane"
-    }
-    getIcon(): string {
-        return "popup-open"
-    }
-
-    async onOpen() {
-		this.root = createRoot(this.containerEl.children[1]);
-		this.root.render(
-			<AppContext.Provider value={this.app}>
-				<PluginView />
-            </AppContext.Provider>
-		);
-	}
-    async onClose() {
-		this.root?.unmount();
-	}
-}
\ No newline at end of file
diff --git a/src/utils/Logs.ts b/src/utils/Logs.ts
new file mode 100644
index 0000000..a5aad66
--- /dev/null
+++ b/src/utils/Logs.ts
@@ -0,0 +1,5 @@
+import { Notice } from "obsidian";
+
+export const createNotice = (message: string, timeout = 5000): void => {
+    new Notice(`Obsidian Intelligence: ${message}`, timeout);
+};
\ No newline at end of file
diff --git a/src/utils/error.ts b/src/utils/error.ts
new file mode 100644
index 0000000..8d9dbfb
--- /dev/null
+++ b/src/utils/error.ts
@@ -0,0 +1,34 @@
+import { log_error } from "./log";
+
+export class TemplaterError extends Error {
+    constructor(msg: string, public console_msg?: string) {
+        super(msg);
+        this.name = this.constructor.name;
+        Error.captureStackTrace(this, this.constructor);
+    }
+}
+
+export async function errorWrapper<T>(
+    fn: () => Promise<T>,
+    msg: string
+): Promise<T> {
+    try {
+        return await fn();
+    } catch (e) {
+        if (!(e instanceof TemplaterError)) {
+            log_error(new TemplaterError(msg, e.message));
+        } else {
+            log_error(e);
+        }
+        return null as T;
+    }
+}
+
+export function errorWrapperSync<T>(fn: () => T, msg: string): T {
+    try {
+        return fn();
+    } catch (e) {
+        log_error(new TemplaterError(msg, e.message));
+        return null as T;
+    }
+}
diff --git a/src/utils/log.ts b/src/utils/log.ts
new file mode 100644
index 0000000..0781902
--- /dev/null
+++ b/src/utils/log.ts
@@ -0,0 +1,22 @@
+import { Notice } from "obsidian";
+import { TemplaterError } from "./error";
+
+export function log_update(msg: string): void {
+    const notice = new Notice("", 15000);
+    // TODO: Find better way for this
+    // @ts-ignore
+    notice.noticeEl.innerHTML = `<b>obsidian-agents update</b>:<br/>${msg}`;
+}
+
+export function log_error(e: Error | TemplaterError): void {
+    const notice = new Notice("", 8000);
+    if (e instanceof TemplaterError && e.console_msg) {
+        // TODO: Find a better way for this
+        // @ts-ignore
+        notice.noticeEl.innerHTML = `<b>obsidian-agents Error</b>:<br/>${e.message}<br/>Check console for more information`;
+        console.error(`obsidian-agents Error:`, e.message, "\n", e.console_msg);
+    } else {
+        // @ts-ignore
+        notice.noticeEl.innerHTML = `<b>obsidian-agents Error</b>:<br/>${e.message}`;
+    }
+}
diff --git a/src/utils/templates.ts b/src/utils/templates.ts
new file mode 100644
index 0000000..777ff9c
--- /dev/null
+++ b/src/utils/templates.ts
@@ -0,0 +1,3 @@
+export const defaultAssistantInstructions = `- the uploaded files you have are my notes - if i mention the titles or contents of files i have given you in my response or with [[this syntax]], please look through relevant notes and use them in your response
+- include annotations to the files you retrieve for your response. include them in your response format [^x] where x is the index starting from 0
+- Use markdown format by adding syntax and \n in your responses before bullet lists, numbers, and paragraphs.`;
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..3eb27e6
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,88 @@
+import { TemplaterError } from "./error";
+import {
+    App,
+    normalizePath,
+    TAbstractFile,
+    TFile,
+    TFolder,
+    Vault,
+} from "obsidian";
+
+export function delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export function escape_RegExp(str: string): string {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+}
+
+export function generate_command_regex(): RegExp {
+    return /<%(?:-|_)?\s*[*~]{0,1}((?:.|\s)*?)(?:-|_)?%>/g;
+}
+
+export function generate_dynamic_command_regex(): RegExp {
+    return /(<%(?:-|_)?\s*[*~]{0,1})\+((?:.|\s)*?%>)/g;
+}
+
+export function resolve_tfolder(folder_str: string): TFolder {
+    folder_str = normalizePath(folder_str);
+
+    const folder = app.vault.getAbstractFileByPath(folder_str);
+    if (!folder) {
+        throw new TemplaterError(`Folder "${folder_str}" doesn't exist`);
+    }
+    if (!(folder instanceof TFolder)) {
+        throw new TemplaterError(`${folder_str} is a file, not a folder`);
+    }
+
+    return folder;
+}
+
+export function resolve_tfile(file_str: string): TFile {
+    file_str = normalizePath(file_str);
+
+    const file = app.vault.getAbstractFileByPath(file_str);
+    if (!file) {
+        throw new TemplaterError(`File "${file_str}" doesn't exist`);
+    }
+    if (!(file instanceof TFile)) {
+        throw new TemplaterError(`${file_str} is a folder, not a file`);
+    }
+
+    return file;
+}
+
+export function get_tfiles_from_folder(folder_str: string, extension?: string): Array<TFile> {
+    const folder = resolve_tfolder(folder_str);
+
+    const files: Array<TFile> = [];
+    Vault.recurseChildren(folder, (file: TAbstractFile) => {
+        
+        if (file instanceof TFile && (extension && file.extension === extension)) {
+            files.push(file);
+        }
+    });
+
+    files.sort((a, b) => {
+        return a.basename.localeCompare(b.basename);
+    });
+
+    return files;
+}
+
+export function arraymove<T>(
+    arr: T[],
+    fromIndex: number,
+    toIndex: number
+): void {
+    if (toIndex < 0 || toIndex === arr.length) {
+        return;
+    }
+    const element = arr[fromIndex];
+    arr[fromIndex] = arr[toIndex];
+    arr[toIndex] = element;
+}
+
+export function get_active_file(app: App) {
+    return app.workspace.activeEditor?.file ?? app.workspace.getActiveFile();
+}
diff --git a/styles.css b/styles.css
index 0cec8eb..24026a7 100644
--- a/styles.css
+++ b/styles.css
@@ -1,56 +1,278 @@
 .agent-view-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
     height: 100%;
 }
-.chat-container {
+.chatbox-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    height: 100%;
     width: 100%;
-    max-height: 100%;
-    margin: 0 auto;
-    padding: 20px;
-    overflow-y: scroll;
-    border: 1px solid var(--blockquote-border-color);
+    overflow: hidden;
+    user-select: text;
+}
+
+.messages-container {
+    border: 1px solid var(--color-base-70);
     border-radius: 10px;
     margin: 0.5rem 0;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+.loader-container {
+    display: flex;
+    align-items: flex-end;
+    padding-bottom: 8px;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+
+}
+
+.scroll-to-bottom-button {
+    position: absolute;
+    bottom: 25%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    background-color: #fff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 }
 
 .chat-message {
     width: 90%;
-    padding: 10px;
-    margin-bottom: 10px;
+    padding: 0px 8px;
+    margin: 10px;
     border-radius: 5px;
 }
 
-.chat-message.sent {
+.chat-message.user {
     background-color: var(--color-blue);
     align-self: flex-end;
 }
 
-.chat-message.received {
+.chat-message.assistant {
     background-color: var(--color-base-50);
     align-self: flex-start;
 }
 
-.chat-message p.text {
-    color: white;
+.chatbox .messages-container:hover .scroll-to-bottom-button {
+    display: block;
 }
 
-.chat-input div.container {
+.annotation-tooltip-container {
     display: flex;
-    max-height: 50%;
+    flex-direction: column;
+}
+
+.message-footer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding-bottom: 8px;
+}
+
+
+.copy-icon-container {
+    padding-top: 8px;
+}
+.copy-icon {
+    cursor: pointer;
+}
+
+.chat-message .message-text {
+    color: white;
+    & > :is(li)::marker {
+        color: white;
+    }
+}
+
+.message-input.container {
+    display: flex;
+    width: 100%;
+    max-height: 25%;
     flex-direction: row;
     justify-content: space-between;
-    margin-top: 10px;
+    gap: 8px;
+    margin-top: 8px;
+    margin-bottom: 8px;
 }
 
-.chat-input textarea.input {
+.message-input textarea.input {
     max-height: 100%;
+    min-height: 32px;
     flex-grow: 1;
     resize: vertical;
 }
 
-.chat-input button.send {
+.message-input button.send {
     width: 15%;
-}
\ No newline at end of file
+}
+
+
+.collapsible-container {
+    width: 100%;
+    max-height: 25%;
+    margin-top: 8px;
+}
+
+.collapsible-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.arrow {
+    margin-right: 4px;
+}
+
+.collapsible-content {
+    max-height: 100%;
+    overflow-y: scroll;
+    padding: 8px;
+}
+
+.file-input-container {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.file-input-container input {
+    flex-grow: 1;
+}
+
+
+.files-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.file-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 5px;
+    padding: 4x;
+    margin-bottom: 4px;
+}
+
+.file-row div.button-group {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+
+/* AssistantManager.tsx */
+
+.chat-top-section-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
+}
+
+.dropdowns-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
+}
+
+.dropdown-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-basis: 0;
+    flex-grow: 1;
+    width: 100%;
+    gap: 8px;
+}
+
+.thread-bar-container {
+    display: flex;
+    width: 100%;
+    gap: 8px;
+}
+
+.thread-bar-container input {
+    flex-basis: 0;
+    flex-grow: 1;
+}
+
+.dropdown-buttons-container {
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    gap: 8px;
+
+    & > :is(button) {
+        padding: 0px 8px;
+    }
+}
+
+/* DropdownSelect.tsx */
+
+.dropdown-select {
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    max-width: 50%;
+    flex-basis: 0;
+    flex-grow: 1;
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4"%3E%3Cpath fill="%23FFF" opacity="0.4" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/%3E%3C/svg%3E');
+}
+
+/* AssistantEditModal.ts */
+
+.file-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 5px;
+    padding: 4x;
+    margin-bottom: 4px;
+}
+
+.file-item span {
+    margin-right: 8px;
+}
+
+.form-setting-textarea textarea {
+    resize: vertical;
+}
+
+.modal-footer {
+    display: flex;
+    margin-top: 8px;
+    justify-content: flex-end;
+}
+
+/* .form-submit-button {
+
+} */
diff --git a/tsconfig.json b/tsconfig.json
index 25b493b..ff5cadf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,15 +12,19 @@
     "importHelpers": true,
     "isolatedModules": true,
     "jsx": "react",
-	"strictNullChecks": true,
+    "strictNullChecks": true,
     "lib": [
       "DOM",
       "ES5",
       "ES6",
       "ES7"
-    ]
+    ],
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": [
-    "**/*.ts"
-, "src/ui/window.tsx"  ]
+    "**/*.ts",
+    "src/ui/AppView.tsx"
+  ]
 }