Merge pull request #2654 from ably/web-4440-gpt-link

[WEB-4440] Add Open in ChatGPT button to right sidebar

Author: jamiehenson

package.json

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

src/components/Layout/RightSidebar.tsx

@@ -7,10 +7,11 @@ import { componentMaxHeight, HEADER_HEIGHT, HEADER_BOTTOM_MARGIN } from '@ably/u
 
 import { LanguageSelector } from './LanguageSelector';
 import { useLayoutContext } from 'src/contexts/layout-context';
+import { productData } from 'src/data';
+import { LanguageKey } from 'src/data/languages/types';
 import { languageInfo } from 'src/data/languages';
 import { ActivePage, sidebarAlignmentClasses, sidebarAlignmentStyles } from './utils/nav';
 import { INKEEP_ASK_BUTTON_HEIGHT } from './utils/heights';
-import { LanguageKey } from 'src/data/languages/types';
 
 type SidebarHeader = {
   id: string;
@@ -30,35 +31,36 @@ const externalLinks = (
   activePage: ActivePage,
   location: WindowLocation,
 ): { label: string; icon: IconName; link: string; type: string }[] => {
+  if (!activePage) {
+    return [];
+  }
+
   let githubEditPath = '#';
-  let requestPath = '#';
-
-  if (activePage) {
-    const githubPathName = location.pathname.replace('docs/', '');
-
-    if (customGithubPaths[githubPathName]) {
-      githubEditPath = customGithubPaths[githubPathName];
-    } else if (activePage.template === 'mdx') {
-      githubEditPath =
-        githubBasePathMDX + (activePage.page.index ? `${githubPathName}/index.mdx` : `${githubPathName}.mdx`);
-    } else {
-      githubEditPath =
-        githubBasePathTextile +
-        (activePage.page.index ? `${githubPathName}/index.textile` : `${githubPathName}.textile`);
-    }
+  const githubPathName = location.pathname.replace('docs/', '');
+
+  if (customGithubPaths[githubPathName]) {
+    githubEditPath = customGithubPaths[githubPathName];
+  } else if (activePage.template === 'mdx') {
+    githubEditPath =
+      githubBasePathMDX + (activePage.page.index ? `${githubPathName}/index.mdx` : `${githubPathName}.mdx`);
+  } else {
+    githubEditPath =
+      githubBasePathTextile + (activePage.page.index ? `${githubPathName}/index.textile` : `${githubPathName}.textile`);
+  }
 
-    const language = new URLSearchParams(location.search).get('lang') as LanguageKey;
-    const requestTitle = `Change request for: ${activePage.page.link}`;
-    const requestBody = encodeURIComponent(`
+  const language = activePage.languages.length > 0 ? activePage.language : null;
+  const requestTitle = `Change request for: ${activePage.page.link}`;
+  const requestBody = encodeURIComponent(`
   **Page name**: ${activePage.page.name}
   **URL**: [${activePage.page.link}](https://ably.com${activePage.page.link})
   ${language && languageInfo[language] ? `Language: **${languageInfo[language].label}**` : ''}
 
   **Requested change or enhancement**:
 `);
 
-    requestPath = `${requestBasePath}?title=${requestTitle}&body=${requestBody}`;
-  }
+  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 [
     {
@@ -68,6 +70,7 @@ const externalLinks = (
       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' },
   ];
 };
 
@@ -253,7 +256,7 @@ const RightSidebar = () => {
               <div
                 className={cn(
                   'flex items-center p-4',
-                  index === 0 && 'border-b border-neutral-300 dark:border-neutral-1000',
+                  index > 0 && 'border-t border-neutral-300 dark:border-neutral-1000',
                 )}
               >
                 <div className="flex-1 flex items-center gap-3">

src/components/Layout/utils/nav.ts

@@ -14,7 +14,7 @@ export type ActivePage = {
   tree: PageTreeNode[];
   page: NavProductPage;
   languages: LanguageKey[];
-  language: LanguageKey;
+  language: LanguageKey | null;
   product: ProductKey | null;
   template: PageTemplate;
 };

src/contexts/layout-context.tsx

@@ -92,16 +92,18 @@ export const LayoutProvider: React.FC<PropsWithChildren<{ pageContext: PageConte
         tree: [],
         page: { name: '', link: '' },
         languages: [],
-        language: activeLanguage,
+        language: null,
         product: null,
         template: null,
       };
     }
 
+    const languages = (activePageData.page.languages as LanguageKey[]) ?? activeLanguages;
+
     return {
       ...activePageData,
-      languages: (activePageData.page.languages as LanguageKey[]) ?? activeLanguages,
-      language: activeLanguage,
+      languages,
+      language: languages.includes(activeLanguage) ? activeLanguage : null,
       template: (pageContext?.layout?.mdx ? 'mdx' : 'textile') as PageTemplate,
     };
   }, [location.pathname, location.search, pageContext?.languages, domLanguages, pageContext?.layout?.mdx]);

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.1.0":
-  version "17.1.0"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-17.1.0.tgz#5c3612d37cb75668f2ef3058ad96c0bc17761ed9"
-  integrity sha512-tRztxGCwzJ9+9yy/1TurefoTXDjWTvTluOzsQzeZIGD6uRaF/JrA0WggtiYnFnw0FKudQN57ENvXpHpfOZunIg==
+"@ably/ui@17.2.1":
+  version "17.2.1"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-17.2.1.tgz#4a4442220f6c476b5042a5313f5b8e849ab37007"
+  integrity sha512-mQTvr0DFqfHQSL16eARwoyj4aSHk8TO4bRUO3FRegUs4kQoZT+EolFxTzfCggsLwPKznBJM1yfIg6EAqCGREfw==
   dependencies:
     "@radix-ui/react-accordion" "^1.2.1"
     "@radix-ui/react-navigation-menu" "^1.2.4"