From 56b903690a8c8ca6a14917e29990a59c51335e34 Mon Sep 17 00:00:00 2001
From: James <james@jan.ai>
Date: Thu, 11 Apr 2024 17:19:27 +0700
Subject: [PATCH] fix: add markdown support for extension description

Signed-off-by: James <james@jan.ai>
---
 .../inference-nitro-extension/package.json    |  2 +-
 .../Settings/CoreExtensions/ExtensionItem.tsx |  2 +-
 web/screens/Settings/CoreExtensions/index.tsx | 25 ++++++++++++++++---
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/extensions/inference-nitro-extension/package.json b/extensions/inference-nitro-extension/package.json
index 78558b1c39..9eda07b89b 100644
--- a/extensions/inference-nitro-extension/package.json
+++ b/extensions/inference-nitro-extension/package.json
@@ -2,7 +2,7 @@
   "name": "@janhq/inference-nitro-extension",
   "productName": "Nitro Inference Engine Extension",
   "version": "1.0.0",
-  "description": "This extension embeds Nitro, a lightweight (3mb) inference engine written in C++. See https://nitro.jan.ai.\nUse this setting if you encounter errors related to **CUDA toolkit** during application execution.",
+  "description": "This extension embeds Nitro, a lightweight (3mb) inference engine written in C++. See https://nitro.jan.ai.\nAdditional dependencies could be installed to run without Cuda Toolkit installation.",
   "main": "dist/index.js",
   "node": "dist/node/index.cjs.js",
   "author": "Jan <service@jan.ai>",
diff --git a/web/screens/Settings/CoreExtensions/ExtensionItem.tsx b/web/screens/Settings/CoreExtensions/ExtensionItem.tsx
index 5d31cf20d4..72f8ea89b8 100644
--- a/web/screens/Settings/CoreExtensions/ExtensionItem.tsx
+++ b/web/screens/Settings/CoreExtensions/ExtensionItem.tsx
@@ -83,7 +83,7 @@ const ExtensionItem: React.FC<Props> = ({ item }) => {
   const description = marked.parse(item.description ?? '', { async: false })
 
   return (
-    <div className="mx-6 flex w-full items-start justify-between border-b border-border py-4 py-6 first:pt-4 last:border-none">
+    <div className="mx-6 flex w-full items-start justify-between border-b border-border py-6 first:pt-4 last:border-none">
       <div className="flex-1 flex-shrink-0 space-y-1.5">
         <div className="flex items-center gap-x-2">
           <h6 className="text-base font-bold">Additional Dependencies</h6>
diff --git a/web/screens/Settings/CoreExtensions/index.tsx b/web/screens/Settings/CoreExtensions/index.tsx
index dd39d5a237..2704ac8ced 100644
--- a/web/screens/Settings/CoreExtensions/index.tsx
+++ b/web/screens/Settings/CoreExtensions/index.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 import React, { useState, useEffect, useRef } from 'react'
 
 import { Button, ScrollArea } from '@janhq/uikit'
+import { Marked, Renderer } from 'marked'
 
 import Loader from '@/containers/Loader'
 
@@ -88,9 +88,16 @@ const ExtensionCatalog = () => {
                       {item.version}
                     </h6>
                   </div>
-                  <p className="whitespace-pre-wrap leading-relaxed ">
-                    {item.description}
-                  </p>
+                  {
+                    <div
+                      dangerouslySetInnerHTML={{
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        __html: marked.parse(item.description ?? '', {
+                          async: false,
+                        }),
+                      }}
+                    />
+                  }
                 </div>
               </div>
             )
@@ -130,4 +137,14 @@ const ExtensionCatalog = () => {
   )
 }
 
+const marked: Marked = new Marked({
+  renderer: {
+    link: (href, title, text) => {
+      return Renderer.prototype.link
+        ?.apply(this, [href, title, text])
+        .replace('<a', "<a class='text-blue-500' target='_blank'")
+    },
+  },
+})
+
 export default ExtensionCatalog