From 3fe10db8e0a9463143d36a0aaf10c9175a3a5765 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Mon, 25 Nov 2024 12:18:18 -0800
Subject: [PATCH] Fix button status on imported skill change show alert on
 skill change Update markdown type and theme on import of agent skill

---
 .../src/components/WorkspaceChat/index.jsx    |  2 +-
 .../Imported/ImportedSkillConfig/index.jsx    |  6 ++++
 .../PullAndReview/HubItem/AgentSkill.jsx      | 34 +++++++++++++++----
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/index.jsx b/frontend/src/components/WorkspaceChat/index.jsx
index bff7925730..90fafe5d03 100644
--- a/frontend/src/components/WorkspaceChat/index.jsx
+++ b/frontend/src/components/WorkspaceChat/index.jsx
@@ -96,7 +96,7 @@ function copyCodeSnippet(uuid) {
 }
 
 // Listens and hunts for all data-code-snippet clicks.
-function setEventDelegatorForCodeSnippets() {
+export function setEventDelegatorForCodeSnippets() {
   document?.addEventListener("click", function (e) {
     const target = e.target.closest("[data-code-snippet]");
     const uuidCode = target?.dataset?.code;
diff --git a/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx b/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
index 8d33e65631..0a98d8d257 100644
--- a/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
+++ b/frontend/src/pages/Admin/Agents/Imported/ImportedSkillConfig/index.jsx
@@ -55,6 +55,11 @@ export default function ImportedSkillConfig({
       prev.map((s) => (s.hubId === config.hubId ? updatedConfig : s))
     );
     setConfig(updatedConfig);
+    showToast(
+      `Skill ${updatedConfig.active ? "activated" : "deactivated"}.`,
+      "success",
+      { clear: true }
+    );
   }
 
   async function handleSubmit(e) {
@@ -91,6 +96,7 @@ export default function ImportedSkillConfig({
       )
     );
     showToast("Skill config updated successfully.", "success");
+    setHasChanges(false);
   }
 
   useEffect(() => {
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx
index 2e8caacef7..85fec8b8a3 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx
@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
 import renderMarkdown from "@/utils/chat/markdown";
 import DOMPurify from "dompurify";
 import CommunityHub from "@/models/communityHub";
+import { setEventDelegatorForCodeSnippets } from "@/components/WorkspaceChat";
 
 export default function AgentSkill({ item, settings, setStep }) {
   const [loading, setLoading] = useState(false);
@@ -30,6 +31,10 @@ export default function AgentSkill({ item, settings, setStep }) {
     }
   }
 
+  useEffect(() => {
+    setEventDelegatorForCodeSnippets();
+  }, []);
+
   return (
     <div className="flex flex-col mt-4 gap-y-4">
       <div className="border border-white/10 light:border-orange-500/20 my-2 flex flex-col md:flex-row md:items-center gap-x-2 text-theme-text-primary mb-4 bg-orange-800/30 light:bg-orange-500/10 rounded-lg px-4 py-2">
@@ -112,11 +117,6 @@ function FileReview({ item }) {
   const files = item.manifest.files || [];
   const [index, setIndex] = useState(0);
   const [file, setFile] = useState(files[index]);
-
-  useEffect(() => {
-    if (files.length > 0) setFile(files?.[index] || files[0]);
-  }, [index]);
-
   function handlePrevious() {
     if (index > 0) setIndex(index - 1);
   }
@@ -125,6 +125,24 @@ function FileReview({ item }) {
     if (index < files.length - 1) setIndex(index + 1);
   }
 
+  function fileMarkup(file) {
+    const extension = file.name.split(".").pop();
+    switch (extension) {
+      case "js":
+        return "javascript";
+      case "json":
+        return "json";
+      case "md":
+        return "markdown";
+      default:
+        return "text";
+    }
+  }
+
+  useEffect(() => {
+    if (files.length > 0) setFile(files?.[index] || files[0]);
+  }, [index]);
+
   if (!file) return null;
   return (
     <div className="flex flex-col gap-y-2">
@@ -153,10 +171,12 @@ function FileReview({ item }) {
           </button>
         </div>
         <span
-          className="whitespace-pre-line flex flex-col gap-y-1 text-sm leading-[20px] max-h-[500px] overflow-y-auto"
+          className="whitespace-pre-line flex flex-col gap-y-1 text-sm leading-[20px] max-h-[500px] overflow-y-auto hljs"
           dangerouslySetInnerHTML={{
             __html: DOMPurify.sanitize(
-              renderMarkdown(`\`\`\`javascript\n${file.content}\n\`\`\``)
+              renderMarkdown(
+                `\`\`\`${fileMarkup(file)}\n${file.content}\n\`\`\``
+              )
             ),
           }}
         />