show initial setup guide link on setting tab (#18)

* show initial setup guide link on setting tab * fix lint
glowingjade · Oct 15, 2024 · 679a307 · 679a307
1 parent 7b43feb
commit 679a307
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -8,49 +8,65 @@ Obsidian Smart Composer is a plugin that helps you write efficiently with AI by
 
 ### Contextual Chat
 
-Upgrade your note-taking experience with our Contextual AI Assistant, inspired by Cursor AI. Unlike typical AI plugins, our assistant allows you to precisely select the context for your interactions:
+> Upgrade your note-taking experience with our Contextual AI Assistant, inspired by Cursor AI. Unlike typical AI plugins, our assistant allows you to precisely select the context for your interactions.
 
 - Type `@<filename>` to choose specific files as your conversation context
 - Get responses based on selected vault content
 
 ### Apply Edit
 
-Smart Composer suggests edits to your document, you can apply with a single click.
+> Smart Composer suggests edits to your document; You can apply with a single click.
 
 - Offers document change recommendations
 - Apply suggested changes instantly
 
+Note: The Apply Edit feature is currently slower than desired. We are working on improvements in future updates.
+
 #### Additional Features
 
 - **Custom Model Selection** : Use your own model by setting your API Key (stored locally).
 
 ## Getting Started
 
-Currently, Obsidian Smart Composer is available through manual installation only. Community plugin support is coming soon.
+Currently, Obsidian Smart Composer is available through [Beta Quickstart](#beta-quickstart-recommended) or [Manual Installation](#manual-installation). Community plugin support is coming soon.
 
-### Manual Installation
+### Beta Quickstart (Recommended)
 
-1. Download `main.js`, `manifest.json`, and `styles.css` from the [latest release](https://github.com/glowingjade/obsidian-smart-composer/releases/latest).
-2. Create a folder named `obsidian-smart-composer` in your vault's `<Vault>/.obsidian/plugins/` directory.
-3. Place the downloaded files into this new folder.
-4. Open Obsidian settings `Settings > Community plugins`, and enable Obsidian Smart Composer.
+To install Obsidian Smart Composer as a beta plugin:
+
+1. Install the BRAT plugin if you haven't already. [Click here](obsidian://show-plugin?id=obsidian42-brat) to install BRAT in Obsidian.
+2. Open the command palette and run the command **"BRAT: Add a beta plugin for testing"**.
+3. Copy and paste this link into the modal: **https://github.com/glowingjade/obsidian-smart-composer**. Click "Add Plugin" and wait for the installation.
+4. Go to `Settings > Community plugins` and refresh the list of plugins. Enable "Obsidian Smart Composer".
 
 ### Initial Setup
 
-1. Obtain an API key from your preferred AI service provider.
+> You need to set up your API key to use the plugin.
+
+1. Obtain an API key from your preferred AI service provider. (You need to create an account to get API key.)
+
+   - OpenAI : [ChatGPT API Keys](https://platform.openai.com/api-keys)
+   - Anthropic : [Claude API Keys](https://console.anthropic.com/settings/keys)
+   - Groq : [Groq API Keys](https://console.groq.com/keys)
+
 2. In Obsidian, go to `Settings > Obsidian Smart Composer`.
 3. Enter your API key in the designated field.
 
-Note: The plugin requires a valid API key to work.
-
 ### Commands and Hotkeys
 
 Obsidian Smart Composer adds a few commands to work with AI. You can set custom hotkeys for these commands by going to `Settings > Hotkeys` and searching for "Obsidian Smart Composer". (Note: Hotkeys are unset by default)
 
 | Command               | Description                                | Preferred Hotkey |
 | --------------------- | ------------------------------------------ | ---------------- |
-| Open Chat View        | Opens the AI chat interface                | Cmd+Shift+L      |
-| Add Selection to Chat | Adds the selected text to the current chat | Cmd+L            |
+| Open Chat View        | Opens the AI chat interface                | `Cmd+Shift+L`    |
+| Add Selection to Chat | Adds the selected text to the current chat | `Cmd+L`          |
+
+### Manual Installation
+
+1. Download `main.js`, `manifest.json`, and `styles.css` from the [latest release](https://github.com/argenos/nldates-obsidian/releases/latest).
+2. Create a folder named `obsidian-smart-composer` in your vault's `<Vault>/.obsidian/plugins/` directory.
+3. Place the downloaded files into this new folder.
+4. Open Obsidian settings `Settings > Community plugins`, and enable Obsidian Smart Composer.
 
 ## Roadmap
 

diff --git a/src/settings/SettingTab.tsx b/src/settings/SettingTab.tsx
@@ -16,6 +16,21 @@ export class SmartCopilotSettingTab extends PluginSettingTab {
 
     containerEl.empty()
 
+    const apiKeysHeading = new Setting(containerEl)
+      .setHeading()
+      .setName('API Keys')
+      .setDesc('Enter your API keys for the services you want to use')
+
+    apiKeysHeading.descEl.createEl('br')
+
+    apiKeysHeading.descEl.createEl('a', {
+      text: 'How to obtain API keys',
+      attr: {
+        href: 'https://github.com/glowingjade/obsidian-smart-composer/#initial-setup',
+        target: '_blank',
+      },
+    })
+
     new Setting(containerEl).setName('OpenAI API Key').addText((text) =>
       text
         .setPlaceholder('Enter your API key')
@@ -52,38 +67,49 @@ export class SmartCopilotSettingTab extends PluginSettingTab {
         }),
     )
 
-    new Setting(containerEl).setName('Chat Model').addDropdown((dropdown) =>
-      dropdown
-        .addOptions(
-          CHAT_MODEL_OPTIONS.reduce<Record<string, string>>((acc, option) => {
-            acc[option.value] = option.name
-            return acc
-          }, {}),
-        )
-        .setValue(this.plugin.settings.chatModel)
-        .onChange(async (value) => {
-          await this.plugin.setSettings({
-            ...this.plugin.settings,
-            chatModel: value,
-          })
-        }),
-    )
+    new Setting(containerEl).setHeading().setName('Model Settings')
 
-    new Setting(containerEl).setName('Apply Model').addDropdown((dropdown) =>
-      dropdown
-        .addOptions(
-          APPLY_MODEL_OPTIONS.reduce<Record<string, string>>((acc, option) => {
-            acc[option.value] = option.name
-            return acc
-          }, {}),
-        )
-        .setValue(this.plugin.settings.applyModel)
-        .onChange(async (value) => {
-          await this.plugin.setSettings({
-            ...this.plugin.settings,
-            applyModel: value,
-          })
-        }),
-    )
+    new Setting(containerEl)
+      .setName('Chat Model')
+      .setDesc('Choose the model you want to use for chat')
+      .addDropdown((dropdown) =>
+        dropdown
+          .addOptions(
+            CHAT_MODEL_OPTIONS.reduce<Record<string, string>>((acc, option) => {
+              acc[option.value] = option.name
+              return acc
+            }, {}),
+          )
+          .setValue(this.plugin.settings.chatModel)
+          .onChange(async (value) => {
+            await this.plugin.setSettings({
+              ...this.plugin.settings,
+              chatModel: value,
+            })
+          }),
+      )
+
+    new Setting(containerEl)
+      .setName('Apply Model')
+      .setDesc('Choose the model you want to use for apply')
+      .addDropdown((dropdown) =>
+        dropdown
+          .addOptions(
+            APPLY_MODEL_OPTIONS.reduce<Record<string, string>>(
+              (acc, option) => {
+                acc[option.value] = option.name
+                return acc
+              },
+              {},
+            ),
+          )
+          .setValue(this.plugin.settings.applyModel)
+          .onChange(async (value) => {
+            await this.plugin.setSettings({
+              ...this.plugin.settings,
+              applyModel: value,
+            })
+          }),
+      )
   }
 }