feat(nx-dev): change "New chat" to "Clear chat" to avoid confusion, a…

…nd open links in new tab
nrwl · Sep 15, 2023 · da3d1b5 · da3d1b5
1 parent e98221e
commit da3d1b5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/nx-dev/feature-ai/src/lib/feed/feed-answer.tsx b/nx-dev/feature-ai/src/lib/feed/feed-answer.tsx
@@ -11,6 +11,38 @@ import { renderMarkdown } from '@nx/nx-dev/ui-markdoc';
 const callout: string =
   '{% callout type="warning" title="Always double-check!" %}The results may not be accurate, so please always double check with our documentation.{% /callout %}\n';
 
+// Rehype plugin to always open links in a new tab so we don't lose chat history.
+interface RehypeNode {
+  type: string;
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  children?: RehypeNode[];
+  value?: string;
+}
+function openLinksInNewTab() {
+  function walk(node: RehypeNode, callback: (node: RehypeNode) => void): void {
+    callback(node);
+    if (node.children?.length) {
+      node.children.forEach((child) => walk(child, callback));
+    }
+  }
+
+  return (tree: RehypeNode) => {
+    walk(tree, (node) => {
+      if (node.type === 'element' && node.tagName === 'a') {
+        console.log(node);
+        const props = node.properties ?? {};
+        const href = props?.['href'] as string;
+        props.target = '_blank';
+        if (href && !href.startsWith('https://nx.dev')) {
+          // For external links, prevent window.opener attacks.
+          props.rel = 'noopener noreferrer';
+        }
+      }
+    });
+  };
+}
+
 export function FeedAnswer({
   content,
   feedbackButtonCallback,
@@ -63,7 +95,10 @@ export function FeedAnswer({
         </div>
         <div className="mt-2 prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl">
           {!isFirst && renderMarkdown(callout, { filePath: '' }).node}
-          <ReactMarkdown children={content} />
+          <ReactMarkdown
+            children={content}
+            rehypePlugins={[openLinksInNewTab]}
+          />
         </div>
         {!isFirst && (
           <div className="group text-md flex-1 md:flex md:justify-end gap-4 md:items-center text-slate-400 hover:text-slate-500 transition">

diff --git a/nx-dev/feature-ai/src/lib/prompt.tsx b/nx-dev/feature-ai/src/lib/prompt.tsx
@@ -2,6 +2,7 @@ import { ChangeEvent, FormEvent, useEffect, useRef } from 'react';
 import {
   ArrowPathIcon,
   PaperAirplaneIcon,
+  XMarkIcon,
   PlusIcon,
   StopIcon,
 } from '@heroicons/react/24/outline';
@@ -87,8 +88,8 @@ export function Prompt({
             className={cx('bg-white dark:bg-slate-900')}
             onClick={handleNewChat}
           >
-            <PlusIcon aria-hidden="true" className="h-5 w-5" />
-            <span className="text-base">New Chat</span>
+            <XMarkIcon aria-hidden="true" className="h-5 w-5" />
+            <span className="text-base">Clear chat</span>
           </Button>
         )}
         {showRegenerateCta && (