Add support dropdown menu to right-hand sidebar of pages #1027
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This component has been swizzled so that we can add a support dropdown menu.
This is called when the user clicks the AI Assistant button in the Support dropdown menu.
This is called when the user clicks the Contact Technical Support button in the Support dropdown menu.
Before this change, the Support button would only appear if the page had a ToC.
By making the Support button static above the ToC, visitors can access the button without having to scroll to the top of the page.
Some pages purposely hide the ToC by using `hide_table_of_contents: true`. We don't want the Support button to appear on those pages since the contents of the page are wider (taking up the space where the ToC would be).
When the `zIndex` is too high, the Support button and ToC appear on top of the language dropdown menu. reducing the `zIndex` makes the language dropdown menu appear over the Support button and ToC.
No longer needed since I added styles to custom.css.
These styles were originally in src/css/SupportDropdownMenu.module.css.
`ReactNode` should be used since it's what Docusaurus is based on.
Styles exist in the custom.css file now rather than a separate CSS file
Combined the contents into "src/components/Support/SupportDropdownMenu.tsx" for easier manageability.
Added the contents from "src/components/Support/ContactSupportLink.tsx" for easier manageability.
Using an absolute link shows as an error for some reason. Changing the absolute link to a relative link doesn't show an error and still imports the component.
Need to adjust the width and padding to accommodate changes to the wording.
Simply `Need help?` results in the arrow being a little too far away from the text. Being a little casual here fixes that.
The component was move in 18027a5, so this import needs to be updated to reflect that.
We decided not to use Font Awesome icons in this component, so we don't need to refer to this plugin here.
This file isn't needed since we can manage the AI assistants in a single file: b160ea8
This reverts commit b530b67.
The GitHub issue link was opening a new tab with the same page that the visitor was on.
Change dropdown item font color to match the default color of other fonts in Docusaurus.
❌ Deploy Preview for staging-scalardb-docs-site failed. Why did it fail? →
|
Member
Author
|
@ypeckstadt @thongdk8 I think the docs site is too heavy for Netlify, which is why it fails being deployed automatically (build and deploys fine in GitHub and locally though). I've added the sites build files and deployed the site manually at the following link instead: https://67d42e0200dd904b345906a2--clinquant-beijinho-49680d.netlify.app |
6 tasks
6 tasks
josh-wong
added a commit
that referenced
this pull request
May 14, 2025
* Swizzle component to add support dropdown menu This component has been swizzled so that we can add a support dropdown menu. * Add `@typebot.io/react` * Create AssistantModal.tsx This is called when the user clicks the AI Assistant button in the Support dropdown menu. * Create ContactSupportLink.tsx This is called when the user clicks the Contact Technical Support button in the Support dropdown menu. * Create SupportDropdownMenu.tsx * Create SupportDropdownMenu.module.css * Add Support dropdown menu above TOC * Make Support button appear with or without ToC Before this change, the Support button would only appear if the page had a ToC. * Pass URL as parameter to Typebot * Show Japanese text on Japanese version of site * Justify alignment for Support button text and arrow icon * Make Support button appear static above ToC By making the Support button static above the ToC, visitors can access the button without having to scroll to the top of the page. * Hide Support button when hiding ToC on page Some pages purposely hide the ToC by using `hide_table_of_contents: true`. We don't want the Support button to appear on those pages since the contents of the page are wider (taking up the space where the ToC would be). * Re-order styles * Show Support button on mobile * Make Support button and ToC appear behind language dropdown When the `zIndex` is too high, the Support button and ToC appear on top of the language dropdown menu. reducing the `zIndex` makes the language dropdown menu appear over the Support button and ToC. * Revise code comments for clarity * Fix spelling * Add support for dark mode * Delete SupportDropdownMenu.module.css No longer needed since I added styles to custom.css. * Add Support button styles These styles were originally in src/css/SupportDropdownMenu.module.css. * Change from using `JSX.Element` to `ReactNode` `ReactNode` should be used since it's what Docusaurus is based on. * Add GitHub issue link and template * Fix styles Styles exist in the custom.css file now rather than a separate CSS file * Revise wording on links * Delete ContactSupportLink.tsx Combined the contents into "src/components/Support/SupportDropdownMenu.tsx" for easier manageability. * Update SupportDropdownMenu.tsx Added the contents from "src/components/Support/ContactSupportLink.tsx" for easier manageability. * Change component link from absolute to relative Using an absolute link shows as an error for some reason. Changing the absolute link to a relative link doesn't show an error and still imports the component. * Adjust width and padding for Support button Need to adjust the width and padding to accommodate changes to the wording. * Specify Support dropdown arrow size The dropdown arrow size should be specified here since doing so in the component causes a flash of unstyled content. * Revised wording in dropdown * Update font style and link behavior * Refactor support dropdown to fix errors on build This refactor is necessary because the error `[cause]: TypeError: Layout_styles_module_default is not a function` occurred. After trying to fix this issue by changing the import for **styles.module.css** to the global **custom.css** file instead, the error `[cause]: ReferenceError: Cannot access 'SupportDropdownMenu' before initialization` occurred. This refactor resolves those issues by ensuring that the support dropdown menu component is initialized first before the Layout component is built. * Hide Stack Overflow link We've decided to not show the Stack Overflow link for now. Commented it out so that we can easily show it later. * Make dropdown menu appear on hover (instead of on click) Making the dropdown menu appear on hover instead of on click matches the natural behavior of other dropdown menus in Docusaurus. * Modify support dropdown menu styles Styles modified to support on-hover behavior instead of on-click behavior and to make the dropdown transitions match the transitions of other dropdown menus in Docusaurus. * Change dropdown arrow icon Changed the arrow icon to match the same icon used in other dropdown menus in Docusaurus. * Fix support dropdown from disappearing This style keeps the support button dropdown menu open when moving the mouse between the button text and icon. * Put support button styles in alphabetical order * Make support button font consistent with other buttons * Add `some` to English button Simply `Need help?` results in the arrow being a little too far away from the text. Being a little casual here fixes that. * Remove comments that were for quick, personal reference * Add rounded corners to dropdown and on link hover * Move file * Move file * Update import The component was move in 18027a5, so this import needs to be updated to reflect that. * Create AssistantModal.tsx * Update link to chatbot * Remove Font Awesome plugin We decided not to use Font Awesome icons in this component, so we don't need to refer to this plugin here. * Show AI assistant based on language * Move back to `Support` folder * Delete AssistantModal.tsx This file isn't needed since we can manage the AI assistants in a single file: b160ea8 * Revert "Update import" This reverts commit b530b67. * Fix GitHub issue link The GitHub issue link was opening a new tab with the same page that the visitor was on. * Change dropdown item font color Change dropdown item font color to match the default color of other fonts in Docusaurus. * Hide support dropdown menu from home page
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds a support dropdown menu to the right-hand sidebar of pages, above the table of contents on the docs site. The support dropdown menu includes the links to the following:
Contact technical supportAsk AI (experimental)Report doc issueNote
Related issues and/or PRs
N/A
Changes made
Layoutcomponent, which contains the table of contents, and added links for the following:Contact technical supportAsk AI (experimental)(modal)Report doc issueAsk AI (experimental)modal, createdAssistantModal.tsxand implemented the AI assistant based on the Typebot deployment method by using the@typebot.io/reactnpm package.Checklist
Additional notes (optional)
To see the support dropdown menu in the staged version of the docs site, please see
the autogenerated comment from Netlifymy comment with a link to our Netlify staging site in this PR.