mirror of
https://github.com/supabase/supabase.git
synced 2026-10-19 08:09:11 +03:00
Alexis AguilarandMiranda Limonczenko
bb1a2ab70d
Resolves [DOCS-1334](https://linear.app/supabase/issue/DOCS-1334/add-copy-as-markdown-ask-affordance-to-troubleshooting-pages). ## What this changes Troubleshooting pages now have the same AI tools as guides: Copy as Markdown, Ask ChatGPT, and Ask Claude. Readers can copy an article as markdown, or open it in an AI assistant in one click. The actions appear in the troubleshooting sidebar, after Keywords. The heading matches the other sidebar headings. On narrow screens, the sidebar stacks under the article, so the actions also work on mobile. <img width="1512" height="908" alt="Screenshot 2026-10-09 at 2 29 13 PM" src="https://github.com/user-attachments/assets/991c1555-c163-4894-91e5-8701bb1831f8" /> <img width="740" height="831" alt="Screenshot 2026-10-09 at 2 32 31 PM" src="https://github.com/user-attachments/assets/1b9423d4-9f26-4f6f-9c9a-e95d50d7808e" /> ## How it works Before this PR, the AI tools section was built directly into the guides sidebar, so only guides could use it. This PR moves it into its own component, and guides and troubleshooting pages both render that component. A future change to these actions, such as adding another assistant or changing the Ask prompt, then happens in one place and applies to both page types. Each page passes a page type to the component. The component includes that page type in the analytics events it sends when someone copies markdown or clicks an Ask link. Guides send `guide`, and troubleshooting pages send `troubleshooting`, so usage on each page type can be measured separately. ## Open question This PR adds a `troubleshooting` page type for analytics. It stays in draft until that value is confirmed. If we reuse `guide` instead, it's a one-line change. ## Testing - Copy as Markdown copies the article and shows the "Copied!" state. - Ask ChatGPT and Ask Claude open with the canonical page URL. ChatGPT requires you to be logged in, which is also true on existing guide pages. - The sidebar layout works at desktop and mobile widths. - Guide pages look and behave the same as before. ## Possible follow-up On troubleshooting pages, the sidebar lists Products, Related error codes, Keywords, AI tools, and then "Is this helpful?". The first four headings use the sidebar's regular heading style. "Is this helpful?" still uses the small monospace style from the guides sidebar, so it stands out. This PR lets the AI tools component accept a heading style from the page it's placed on. The feedback component could accept a heading style the same way. Troubleshooting pages could then pass the regular sidebar style, and every heading in that sidebar would match. --------- Co-authored-by: Miranda Limonczenko <miranda.limonczenko@supabase.io>