feat(tools): open description link in a new tab (#23)

Signed-off-by: Petr Kadlec <[email protected]>

src/modules/tools/ToolCard.module.scss

@@ -41,4 +41,9 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-04;
+
+  a {
+    position: relative;
+    z-index: 1;
+  }
 }

src/modules/tools/ToolCard.tsx

@@ -27,7 +27,7 @@ import { getToolIcon, getToolReference, isExternalTool } from './utils';
 import { ArrowRight, ArrowUpRight, Edit, View } from '@carbon/react/icons';
 import { UserToolModal } from './manage/UserToolModal';
 import { PublicToolModal } from './manage/PublicToolModal';
-import Markdown from 'react-markdown';
+import Markdown, { Components } from 'react-markdown';
 
 interface Props {
   tool: Tool;
@@ -96,7 +96,7 @@ export function ToolCard({ tool, onDeleteSuccess, onSaveSuccess }: Props) {
         <div className={classes.body}>
           {toolDescription && (
             <p className={classes.description}>
-              <Markdown>{toolDescription}</Markdown>
+              <ToolDescription description={toolDescription} />
             </p>
           )}
           {isExternalTool(tool.type, tool.id) && <ToolExternalTag />}
@@ -114,3 +114,15 @@ export function ToolIcon({ tool }: { tool: Tool }) {
     </span>
   );
 }
+
+export function ToolDescription({ description }: { description: string }) {
+  return <Markdown components={TRANSFORM_COMPONENTS}>{description}</Markdown>;
+}
+
+export const TRANSFORM_COMPONENTS: Partial<Components> = {
+  a: ({ node, ...props }) => (
+    <a {...props} target="_blank" rel="noopener noreferrer">
+      {props.children}
+    </a>
+  ),
+};

src/modules/tools/manage/PublicToolModal.tsx

@@ -19,7 +19,7 @@ import { Modal } from '@/components/Modal/Modal';
 import { ModalProps } from '@/layout/providers/ModalProvider';
 import { ModalBody, ModalHeader } from '@carbon/react';
 import classes from './PublicToolModal.module.scss';
-import { ToolIcon } from '../ToolCard';
+import { ToolDescription, ToolIcon } from '../ToolCard';
 import { ToolExternalTag } from '@/modules/assistants/tools/ToolToggle';
 import { isExternalTool } from '../utils';
 import Markdown from 'react-markdown';
@@ -39,7 +39,7 @@ export function PublicToolModal({ tool, ...props }: Props) {
           </div>
           <h2>{tool.name}</h2>
           <div>
-            <Markdown>{tool.user_description}</Markdown>
+            <ToolDescription description={tool.user_description ?? ''} />
           </div>
         </div>
         <dl className={classes.body}>