Merge pull request #2768 from ably/web-4561-claude-button

[WEB-4561] Generalise LLM links, add Claude and track clicks

Author: jamiehenson

package.json

@@ -40,7 +40,7 @@
     "validate-llms-txt": "ts-node bin/validate-llms.txt.ts"
   },
   "dependencies": {
-    "@ably/ui": "17.4.2",
+    "@ably/ui": "17.6.1",
     "@codesandbox/sandpack-react": "^2.20.0",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@gfx/zopfli": "^1.0.15",

src/components/Layout/RightSidebar.tsx

@@ -4,6 +4,8 @@ import cn from '@ably/ui/core/utils/cn';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import { componentMaxHeight, HEADER_HEIGHT, HEADER_BOTTOM_MARGIN } from '@ably/ui/core/utils/heights';
+import Tooltip from '@ably/ui/core/Tooltip';
+import { track } from '@ably/ui/core/insights';
 
 import { LanguageSelector } from './LanguageSelector';
 import { useLayoutContext } from 'src/contexts/layout-context';
@@ -58,19 +60,33 @@ const externalLinks = (
   **Requested change or enhancement**:
 `);
 
-  const requestPath = `${requestBasePath}?title=${requestTitle}&body=${requestBody}`;
-  const prompt = `Tell me more about ${activePage.product ? productData[activePage.product]?.nav.name : 'Ably'}'s '${activePage.page.name}' feature from https://ably.com${activePage.page.link}${language ? ` for ${languageInfo[language]?.label}` : ''}`;
-  const gptPath = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
-
   return [
     {
       label: 'Edit on GitHub',
       icon: 'icon-social-github-mono',
       link: githubEditPath,
       type: 'github',
     },
-    { label: 'Request changes', icon: 'icon-gui-hand-raised-outline', link: requestPath, type: 'request' },
-    { label: 'Open in ChatGPT', icon: 'icon-tech-openai', link: gptPath, type: 'llm' },
+    {
+      label: 'Request changes',
+      icon: 'icon-gui-hand-raised-outline',
+      link: `${requestBasePath}?title=${requestTitle}&body=${requestBody}`,
+      type: 'request',
+    },
+  ];
+};
+
+const llmLinks = (
+  activePage: ActivePage,
+  language: LanguageKey,
+): { model: string; label: string; icon: IconName; link: string }[] => {
+  const prompt = `Tell me more about ${activePage.product ? productData[activePage.product]?.nav.name : 'Ably'}'s '${activePage.page.name}' feature from https://ably.com${activePage.page.link}${language ? ` for ${languageInfo[language]?.label}` : ''}`;
+  const gptPath = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
+  const claudePath = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+
+  return [
+    { model: 'gpt', label: 'ChatGPT', icon: 'icon-tech-openai', link: gptPath },
+    { model: 'claude', label: 'Claude (must be logged in)', icon: 'icon-tech-claude-mono', link: claudePath },
   ];
 };
 
@@ -244,7 +260,7 @@ const RightSidebar = () => {
           </>
         ) : null}
         <div className="bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 rounded-lg transition-colors mt-6">
-          {externalLinks(activePage, location).map(({ label, icon, link, type }, index) => (
+          {externalLinks(activePage, location).map(({ label, icon, link, type }) => (
             <a
               key={label}
               href={link}
@@ -253,12 +269,7 @@ const RightSidebar = () => {
               className="group/external-link"
               data-testid={`external-${type}-link`}
             >
-              <div
-                className={cn(
-                  'flex items-center p-4',
-                  index > 0 && 'border-t border-neutral-300 dark:border-neutral-1000',
-                )}
-              >
+              <div className="flex items-center p-4 border-b border-neutral-300 dark:border-neutral-1000">
                 <div className="flex-1 flex items-center gap-3">
                   <Icon
                     size="20px"
@@ -279,6 +290,38 @@ const RightSidebar = () => {
               </div>
             </a>
           ))}
+          <div className="flex items-center p-4 gap-2">
+            <span className="text-p4 font-semibold text-neutral-900 dark:text-neutral-400">Open in </span>
+            {llmLinks(activePage, language).map(({ model, label, icon, link }) => (
+              <a
+                key={model}
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex h-5 ui-theme-dark group/llm-link cursor-pointer"
+                onClick={() => {
+                  track('llm_link_clicked', {
+                    model,
+                    location: location.pathname,
+                    link,
+                  });
+                }}
+              >
+                <Tooltip
+                  content={label}
+                  triggerElement={
+                    <Icon
+                      name={icon}
+                      size="20px"
+                      additionalCSS="transition-colors text-neutral-900 dark:text-neutral-400 group-hover/llm-link:text-neutral-1300 dark:group-hover/llm-link:text-neutral-000"
+                    />
+                  }
+                >
+                  {label}
+                </Tooltip>
+              </a>
+            ))}
+          </div>
         </div>
       </div>
     </div>

yarn.lock

@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@ably/ui@17.4.2":
-  version "17.4.2"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-17.4.2.tgz#dd3834fbcb713c033f8ecb4d496977a677eab9db"
-  integrity sha512-yB3AZjvtLvHtKRbllKJRFJf7eLnA6rEhMoR736giEvt0uI4b4GZDch2XFBVbLQVDr1i2XTi1WU1RrwP22m6tew==
+"@ably/ui@17.6.1":
+  version "17.6.1"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-17.6.1.tgz#74b9b55bd1e63173bc4a4a9bf3b93bbab68d6a3b"
+  integrity sha512-AJZLUvOYqLftQw/sslrWG2+hREW/ZKRl2wBqERxQj6AO8PScp83OvXhNCM/PQq4y1qTIqw6PxZ54cg0r6UX/gQ==
   dependencies:
     "@heroicons/react" "^2.2.0"
     "@radix-ui/react-accordion" "^1.2.1"