[fix reviewing] registered event

src/main.ts

@@ -32,6 +32,8 @@ export default class InfioPlugin extends Plugin {
 	settings: InfioSettings
 	settingTab: InfioSettingTab
 	settingsListeners: ((newSettings: InfioSettings) => void)[] = []
+	private activeLeafChangeUnloadFn: (() => void) | null = null
+	private metadataCacheUnloadFn: (() => void) | null = null
 	initChatProps?: ChatProps
 	dbManager: DBManager | null = null
 	ragEngine: RAGEngine | null = null
@@ -100,22 +102,26 @@ export default class InfioPlugin extends Plugin {
 			}
 		});
 
-		this.app.workspace.on("active-leaf-change", (leaf) => {
+		this.registerEvent(
-			if (leaf?.view instanceof MarkdownView) {
+			this.app.workspace.on("active-leaf-change", (leaf) => {
-				// @ts-expect-error, not typed
+				if (leaf?.view instanceof MarkdownView) {
-				const editorView = leaf.view.editor.cm as EditorView;
+					// @ts-expect-error, not typed
-				eventListener.onViewUpdate(editorView);
+					const editorView = leaf.view.editor.cm as EditorView;
-				if (leaf.view.file) {
+					eventListener.onViewUpdate(editorView);
-					eventListener.handleFileChange(leaf.view.file);
+					if (leaf.view.file) {
+						eventListener.handleFileChange(leaf.view.file);
+					}
 				}
-			}
+			})
-		});
+		);
 
-		this.app.metadataCache.on("changed", (file: TFile) => {
+		this.registerEvent(
-			if (file) {
+			this.app.metadataCache.on("changed", (file: TFile) => {
-				eventListener.handleFileChange(file);
+				if (file) {
-			}
+					eventListener.handleFileChange(file);
-		});
+				}
+			})
+		);
 
 		// This adds a simple command that can be triggered anywhere
 		this.addCommand({

src/settings/ModelsSettings.tsx

@@ -1,205 +0,0 @@
-import { Notice } from "obsidian";
-import React, { useState } from "react";
-
-import { CustomLLMModel, ModelProviders } from "../types/llm/model";
-import { InfioSettings } from "../types/settings";
-
-import { DropdownComponent, TextComponent, ToggleComponent } from "./FormComponents";
-
-type ModelRowProps = {
-	model: CustomLLMModel;
-	canDelete: boolean;
-	onToggle: (enabled: boolean) => void;
-	onDelete: () => void;
-}
-
-const ModelRow: React.FC<ModelRowProps> = ({ model, canDelete, onToggle, onDelete }) => (
-	<tr>
-		<td>{model.provider}</td>
-		<td>{model.name}{model.isEmbeddingModel ? " [embedding]" : ""}</td>
-		<td>
-			<ToggleComponent
-				value={model.enabled}
-				onChange={onToggle}
-			/>
-		</td>
-		<td>
-			{!canDelete && (
-				<button onClick={onDelete}>Delete</button>
-			)}
-		</td>
-	</tr>
-);
-
-type ModelFormProps = {
-	providers: string[];
-	onSubmit: (model: CustomLLMModel) => void;
-	isEmbeddingModel: boolean;
-}
-
-const ModelForm: React.FC<ModelFormProps> = ({ providers, onSubmit, isEmbeddingModel }) => {
-	const [model, setModel] = useState<CustomLLMModel>({
-		name: "",
-		provider: providers[0] || "",
-		baseUrl: "",
-		apiKey: "",
-		enabled: true,
-		isBuiltIn: false,
-		isEmbeddingModel,
-	});
-
-	const handleSubmit = () => {
-		if (model.name && model.provider) {
-			onSubmit(model);
-			setModel({ ...model, name: "", baseUrl: "", apiKey: "" });
-		} else {
-			new Notice("Please fill in necessary fields!");
-		}
-	};
-
-	return (
-		<div className="infio-llm-add-custom-model-form infio-chat-settings-model-container">
-			<TextComponent
-				name="Model:"
-				value={model.name}
-				placeholder="Enter model name"
-				onChange={(name) => setModel({ ...model, name })}
-			/>
-			<DropdownComponent
-				name="Provider:"
-				options={providers}
-				value={model.provider}
-				onChange={(provider) => setModel({ ...model, provider })}
-			/>
-			<TextComponent
-				name="BaseURL (optional):"
-				value={model.baseUrl || ""}
-				placeholder="https://api.example.com/v1"
-				onChange={(baseUrl) => setModel({ ...model, baseUrl })}
-			/>
-			<TextComponent
-				name="APIKey:"
-				value={model.apiKey || ""}
-				placeholder="Enter API key"
-				type="password"
-				onChange={(apiKey) => setModel({ ...model, apiKey })}
-			/>
-			<ToggleComponent
-				name="IsEmbedding:"
-				value={model.isEmbeddingModel || false}
-				onChange={(isEmbeddingModel) => setModel({ ...model, isEmbeddingModel })}
-			/>
-			<button onClick={handleSubmit} className="infio-llm-add-model-button">
-				Add Model
-			</button>
-		</div>
-	);
-};
-
-type ModelListProps = {
-	models: CustomLLMModel[];
-	chatModelKey: string;
-	applyModelKey: string;
-	onUpdateModel: (index: number, model: CustomLLMModel) => void;
-	onDeleteModel: (modelKey: string) => void;
-}
-
-const ModelList: React.FC<ModelListProps> = ({
-	models,
-	chatModelKey,
-	applyModelKey,
-	onUpdateModel,
-	onDeleteModel,
-}) => (
-	<div className="model-settings-container">
-		<table className="infio-llm-model-settings-table">
-			<thead>
-				<tr>
-					<th>Provider</th>
-					<th>Model</th>
-					<th>Enabled</th>
-					<th>Delete</th>
-				</tr>
-			</thead>
-			<tbody>
-				{models.map((model, index) => (
-					<ModelRow
-						key={`${model.name}`}
-						model={model}
-						canDelete={`${model.name}` in [chatModelKey, applyModelKey]}
-						onToggle={(enabled) => {
-							const updatedModel = { ...model, enabled };
-							onUpdateModel(index, updatedModel);
-						}}
-						onDelete={() => onDeleteModel(`${model.name}`)}
-					/>
-				))}
-			</tbody>
-		</table>
-	</div>
-);
-
-type ModelsSettingsProps = {
-	settings: InfioSettings;
-	setSettings: (settings: InfioSettings) => void;
-}
-
-const ModelsSettings: React.FC<ModelsSettingsProps> = ({ settings, setSettings }) => {
-	const [isAddModelOpen, setIsAddModelOpen] = useState(false);
-
-	const [activeModels, setActiveModels] = useState(settings.activeModels);
-
-	const handleUpdateModel = (index: number, updatedModel: CustomLLMModel) => {
-		const newActiveModels = [...activeModels];
-		newActiveModels[index] = updatedModel;
-		setSettings({ ...settings, activeModels: newActiveModels });
-		setActiveModels(newActiveModels);
-	};
-
-	const handleAddModel = (newModel: CustomLLMModel) => {
-		const newActiveModels = [...activeModels, newModel];
-		setSettings({ ...settings, activeModels: newActiveModels });
-		setActiveModels(newActiveModels);
-	};
-
-	const handleDeleteModel = (modelKey: string) => {
-		const newActiveModels = activeModels.filter(
-			(model) => `${model.name}` !== modelKey
-		);
-
-		setSettings({
-			...settings,
-			activeModels: newActiveModels,
-		});
-		setActiveModels(newActiveModels);
-	};
-
-	return (
-		<div>
-			<h2>Models</h2>
-			<div className="infio-llm-chat-setting-title infio-chat-setting-item-container">
-				<ModelList
-					models={activeModels as CustomLLMModel[]}
-					chatModelKey={settings.chatModelId}
-					applyModelKey={settings.applyModelId}
-					onUpdateModel={handleUpdateModel}
-					onDeleteModel={handleDeleteModel}
-				/>
-				<div className="infio-llm-add-custom-model">
-					<h2 onClick={() => setIsAddModelOpen(!isAddModelOpen)} style={{ cursor: "pointer" }}>
-						Add Custom Model {isAddModelOpen ? "▼" : "▶"}
-					</h2>
-					{isAddModelOpen && (
-						<ModelForm
-							providers={Object.values(ModelProviders)}
-							onSubmit={handleAddModel}
-							isEmbeddingModel={false}
-						/>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default ModelsSettings;

src/settings/ProviderSettings.tsx

@@ -127,14 +127,14 @@ const ProviderSettings: React.FC<ProviderSettingsProps> = ({ settings, setSettin
 	};
 
 	return (
-		<div className="infio-provider">
+		<div className="infio-llm-setting-provider">
 			<DropdownComponent
 				name="API Provider:"
 				value={currProvider}
 				options={PROVIDERS}
 				onChange={updateProvider}
 			/>
-			<div className="iinfio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
 			<TextComponent
 				name={currProvider + " API Key:"}
 				placeholder="Enter your API key"
@@ -142,7 +142,7 @@ const ProviderSettings: React.FC<ProviderSettingsProps> = ({ settings, setSettin
 				onChange={updateProviderApiKey}
 				type="password"
 			/>
-			<div className="iinfio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
 			<ToggleComponent
 				name="Use custom base URL"
 				value={providerSetting.useCustomUrl || false}
@@ -156,22 +156,22 @@ const ProviderSettings: React.FC<ProviderSettingsProps> = ({ settings, setSettin
 				/>
 			)}
 
-			<div className="iinfio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
-			<div className="iinfio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
 			<ComboBoxComponent
 				name="Chat Model:"
 				provider={settings.chatModelProvider || currProvider}
 				modelId={settings.chatModelId}
 				updateModel={updateChatModelId}
 			/>
-			<div className="iinfio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
 			<ComboBoxComponent
-				name="Apply Model:"
+				name="Autocomplete Model:"
 				provider={settings.applyModelProvider || currProvider}
 				modelId={settings.applyModelId}
 				updateModel={updateApplyModelId}
 			/>
-			<div className="iinfio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
 			<ComboBoxComponent
 				name="Embedding Model:"
 				provider={settings.embeddingModelProvider || ApiProvider.Google}
@@ -179,6 +179,8 @@ const ProviderSettings: React.FC<ProviderSettingsProps> = ({ settings, setSettin
 				isEmbedding={true}
 				updateModel={updateEmbeddingModelId}
 			/>
+			<div className="infio-llm-setting-divider"></div>
+			<div className="infio-llm-setting-divider"></div>
 		</div>
 	);
 };

styles.css

@@ -1107,7 +1107,7 @@ input[type='text'].infio-chat-list-dropdown-item-title-input {
   margin-top: 20px;
 }
 
-.infio-provider {
+.infio-llm-setting-provider {
   margin-top: 20px;
 }
 
@@ -1176,7 +1176,7 @@ input[type='text'].infio-chat-list-dropdown-item-title-input {
   padding-left: var(--size-4-1);
 }
 
-.iinfio-llm-setting-divider {
+.infio-llm-setting-divider {
   margin-top: 14px;
 }