2.14.2: feat: usage in settings

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "ava",
 	"name": "🧙 AVA",
-	"version": "2.14.1",
+	"version": "2.14.2",
 	"minAppVersion": "0.12.0",
 	"description": "AI assistant for Obsidian",
 	"author": "louis030195",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ava",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "description": "AI assistant for Obsidian",
   "main": "main.js",
   "scripts": {

src/LegacySettings.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import AvaPlugin from './main';
 import { Spinner } from './StatusBar';
 import { store } from './store';
+import { ENDPOINT_NAMES, getUsage } from './utils';
 
 export interface AvaSettings {
   useLinks: boolean;
@@ -26,6 +27,7 @@ export function AdvancedSettings({ plugin }: { plugin: AvaPlugin }) {
   const [useLinks, setUseLinks] = React.useState(state.settings.useLinks);
   const [isDebug, setDebug] = React.useState(state.settings.debug);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [usage, setUsage] = React.useState<any | undefined>(undefined);
   const showAdvancedSettings = isDebug;
 
   React.useEffect(() => {
@@ -35,6 +37,11 @@ export function AdvancedSettings({ plugin }: { plugin: AvaPlugin }) {
     }
   }, [state.linksStatus]);
 
+  React.useEffect(() => {
+    getUsage(state.settings.token, plugin.manifest.version)
+      .then(setUsage);
+  }, []);
+
   const handleClearIndex = () => {
     posthog.capture('settings', {
       action: 'clearIndex',
@@ -171,14 +178,49 @@ export function AdvancedSettings({ plugin }: { plugin: AvaPlugin }) {
                 onClick={handleClearIndex}
                 aria-label="Clear 🧙 Links' index can be required if you notice some issue with links not working"
               >
-                Clear Index
+                ⚠️ Clear Index
               </button>
             ) : (
               <Spinner />
             )}
           </div>
         </div>
       </div>
+      {/* a list of progress bars displaying current plans' usage */}
+      <div className="">
+        { usage && <div className="text-3xl font-bold">Usage</div>}
+        {
+          usage && Object.keys(usage).map((key: string) => {
+            const percentageAsNumber = Math.round(usage[key].split('/')[0] / usage[key].split('/')[1]) * 100;
+            const percentage = `${percentageAsNumber}%`;
+            return (
+              <div className="flex flex-col items-center mb-3 gap-1" key={key}>
+                <div className="text-sm">{ENDPOINT_NAMES[key]}</div>
+                {/* align the progress bar to the right */}
+                <div className="w-full bg-gray-200 rounded-full dark:bg-gray-700"
+                  // hover the progress bar to show the real usage
+                  aria-label={`${usage[key]} used`}
+                >
+                  {/* width = 16/15 = 106.7% | split the string on / and divide the first number by the second */}
+                  {/* background color of the progress bar is blue when less than 50% used, orange when less than 75% and red when more than 75% */}
+                  <div className={
+                    "text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" +
+                    (
+                      percentageAsNumber < 50 ? " bg-blue-600" :
+                        percentageAsNumber < 75 ? " bg-orange-600" :
+                          " bg-red-600"
+                    )
+                  }
+                    style={{ width: percentage }}>
+                    {/* percentage of usage */}
+                    {percentage}
+                  </div>
+                </div>
+              </div>
+            );
+          })
+        }
+      </div>
       <div className="">
         <div className="text-xl font-bold my-8">Advanced Settings</div>
         <div className="flex h-5 items-center">

src/utils.ts

@@ -304,6 +304,43 @@ export const suggestTags = async (
   });
 };
 
+// interface like
+//{"status":"ok","usage":{"/v1/search":16,"/v1/search/refresh":1,"/v1/text/create":0,"/v1/search/clear":0,"/v1/image/create":6}}
+export interface Usage {
+  '/v1/search': number;
+  '/v1/search/refresh': number;
+  '/v1/text/create': number;
+  '/v1/search/clear': number;
+  '/v1/image/create': number;
+}
+
+// human friendly endpoint names i.e. /v1/search -> Links ...
+export const ENDPOINT_NAMES: {[key: string]: string} = {
+  '/v1/search': 'Links',
+  '/v1/search/refresh': 'Links',
+  '/v1/search/clear': 'Links',
+  '/v1/text/create': 'Texts',
+  '/v1/image/create': 'Images',
+};
+
+export const getUsage = async (
+  token: string,
+  version: string
+): Promise<Usage> => {
+  const response = await fetch(`${API_HOST}/v1/billing/usage`, {
+    method: 'GET',
+    headers: buildHeaders(token, version),
+  });
+  if (response.status !== 200) {
+    throw new Error(`Error getting usage: ${response.statusText}`);
+  }
+  const json = await response.json();
+  console.log('Usage response:', json);
+  return json.usage;
+};
+
+
+
 /**
  * Get all Markdown files in the vault with their content and tags
  * @param {App} app

versions.json

@@ -118,5 +118,6 @@
 	"2.13.8": "0.12.0",
 	"2.13.9": "0.12.0",
 	"2.14.0": "0.12.0",
-	"2.14.1": "0.12.0"
+	"2.14.1": "0.12.0",
+	"2.14.2": "0.12.0"
 }