From f7ec2e47d65acddb8f18c75ab1535e2852559fc3 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 6 Oct 2024 21:58:59 +0300
Subject: [PATCH] Indicates extensions that add tools in the list

---
 public/scripts/extensions/assets/index.js  | 11 ++++++++++-
 public/scripts/extensions/assets/style.css |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/public/scripts/extensions/assets/index.js b/public/scripts/extensions/assets/index.js
index d9797d837..97881c16b 100644
--- a/public/scripts/extensions/assets/index.js
+++ b/public/scripts/extensions/assets/index.js
@@ -184,6 +184,7 @@ function downloadAssetsList(url) {
                         const url = isValidUrl(asset['url']) ? asset['url'] : '';
                         const title = assetType === 'extension' ? `Extension repo/guide: ${url}` : 'Preview in browser';
                         const previewIcon = (assetType === 'extension' || assetType === 'character') ? 'fa-arrow-up-right-from-square' : 'fa-headphones-simple';
+                        const toolTag = assetType === 'extension' && asset['tool'];
 
                         const assetBlock = $('<i></i>')
                             .append(element)
@@ -193,12 +194,20 @@ function downloadAssetsList(url) {
                                             <a class="asset_preview" href="${url}" target="_blank" title="${title}">
                                                 <i class="fa-solid fa-sm ${previewIcon}"></i>
                                             </a>
+                                            ${toolTag ? '<span class="tag" title="Adds a function tool"><i class="fa-solid fa-sm fa-wrench"></i> Tool</span>' : ''}
                                         </span>
                                         <small class="asset-description">
                                             ${description}
                                         </small>
                                      </div>`);
 
+                        assetBlock.find('.tag').on('click', function (e) {
+                            const a = document.createElement('a');
+                            a.href = 'https://docs.sillytavern.app/for-contributors/function-calling/';
+                            a.target = '_blank';
+                            a.click();
+                        });
+
                         if (assetType === 'character') {
                             if (asset.highlight) {
                                 assetBlock.find('.asset-name').append('<i class="fa-solid fa-sm fa-trophy"></i>');
@@ -354,7 +363,7 @@ async function openCharacterBrowser(forceDefault) {
     for (const character of characters.sort((a, b) => a.name.localeCompare(b.name))) {
         const listElement = template.find(character.highlight ? '.contestWinnersList' : '.featuredCharactersList');
         const characterElement = $(await renderExtensionTemplateAsync(MODULE_NAME, 'character', character));
-        const downloadButton  = characterElement.find('.characterAssetDownloadButton');
+        const downloadButton = characterElement.find('.characterAssetDownloadButton');
         const checkMark = characterElement.find('.characterAssetCheckMark');
         const isInstalled = isAssetInstalled('character', character.id);
 
diff --git a/public/scripts/extensions/assets/style.css b/public/scripts/extensions/assets/style.css
index c8b0a2584..dcf12fd01 100644
--- a/public/scripts/extensions/assets/style.css
+++ b/public/scripts/extensions/assets/style.css
@@ -164,3 +164,12 @@
     gap: 5px;
     align-items: center;
 }
+
+.asset-name .tag {
+    gap: 5px;
+    align-items: baseline;
+    font-size: calc(var(--mainFontSize)* 0.8);
+    cursor: pointer;
+    opacity: 0.9;
+    margin-left: 2px;
+}