stack/docs
Madison 6b08d8bfcd
update AI button w/ text (#947)
<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

Enhances AI chat button, and adds it to search as well. 

<img width="106" height="63" alt="image"
src="https://github.com/user-attachments/assets/e76ef5cb-9e27-40c8-bf0f-04940b214f44"
/>

<img width="710" height="291" alt="image"
src="https://github.com/user-attachments/assets/7c1ba130-8e15-4929-b8c7-475bb32fefaf"
/>

<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR enhances the AI chat button across the documentation site by
adding text labels alongside the sparkles icon, making it more
discoverable. The button now displays "AI Chat" text and has been
updated consistently across the home layout and shared header.
Additionally, an "Ask AI" fallback button has been added to the search
dialog footer to help users who can't find what they're looking for
through regular search.

⏱️ Estimated Review Time: 15-30 minutes

<details>
<summary>💡 Review Order Suggestion</summary>

| Order | File Path |
|-------|-----------|
| 1 | `docs/src/components/layouts/home-layout.tsx` |
| 2 | `docs/src/components/layouts/shared-header.tsx` |
| 3 | `docs/src/components/layout/custom-search-dialog.tsx` |
</details>



[![Need help? Join our
Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U)


[![Analyze latest
changes](ba7372824c/?repo_owner=stack-auth&repo_name=stack-auth&pr_number=947)
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Enhances AI chat button with text labels and adds an "Ask AI" fallback
button to the search dialog, improving discoverability and user
experience.
> 
>   - **AI Chat Button Enhancements**:
> - Added text label "AI Chat" to the button in `home-layout.tsx` and
`shared-header.tsx`.
> - Introduced compact icon-only variant for tighter spaces in
`home-layout.tsx`.
> - Updated styling for better visibility and state-awareness when chat
is open.
>   - **Search Dialog**:
> - Added "Ask AI" fallback button in the footer of
`custom-search-dialog.tsx` to open AI chat if search results are
insufficient.
>   - **Styling Adjustments**:
> - Adjusted header spacing and layout for better alignment in
`shared-header.tsx`.
> - Refined footer structure in `custom-search-dialog.tsx` to
accommodate AI fallback.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 6e13d5a894. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>

----


<!-- ELLIPSIS_HIDDEN -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added an “Ask AI” option in the search dialog footer that opens AI
chat as a fallback.
* Introduced a compact icon-only variant of the AI Chat toggle for
tighter spaces.

* **Style**
* Updated AI Chat controls with an inline label, smaller icon, and
state-aware styling when chat is open.
* Adjusted header spacing and layout for better alignment and
readability.
* Refined search dialog footer structure to accommodate the AI fallback
row.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
2025-10-14 15:03:56 -05:00
..
content Update setup instructions 2025-10-11 14:53:17 -07:00
lib Update AI chatbot prompt 2025-07-16 13:38:12 -07:00
public [Docs][Content] - MCP installation instructions (#915) 2025-10-10 13:31:48 -05:00
scripts [Docs][Content] API/SK docs for payments (#935) 2025-10-11 14:47:25 -07:00
src update AI button w/ text (#947) 2025-10-14 15:03:56 -05:00
templates Convex init script 2025-10-14 01:34:49 -07:00
templates-api Rename offer to product, offer group to product catalog (#914) 2025-10-04 02:28:28 -07:00
templates-python [Docs][Content][UI] - JWT docs and JWT component (#905) 2025-09-29 13:05:33 -05:00
.env.development New docs (#698) 2025-06-20 13:30:01 -07:00
.eslintrc.json New docs (#698) 2025-06-20 13:30:01 -07:00
.gitignore Docs updates (#753) 2025-07-11 10:00:02 -07:00
CHANGELOG.md chore: update package versions 2025-10-10 16:45:06 -07:00
cli.json New docs (#698) 2025-06-20 13:30:01 -07:00
docs-platform.yml [Docs][Content] API/SK docs for payments (#935) 2025-10-11 14:47:25 -07:00
next.config.mjs MCP: next update (#912) 2025-10-01 09:48:18 -05:00
package.json chore: update package versions 2025-10-10 16:45:06 -07:00
postcss.config.mjs New docs (#698) 2025-06-20 13:30:01 -07:00
README.md New docs (#698) 2025-06-20 13:30:01 -07:00
source.config.ts New docs (#698) 2025-06-20 13:30:01 -07:00
tsconfig.json New docs (#698) 2025-06-20 13:30:01 -07:00

stack-docs

This is a Next.js application generated with Create Fumadocs.

Run development server:

npm run dev
# or
pnpm dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Explore

In the project, you can see:

  • lib/source.ts: Code for content source adapter, loader() provides the interface to access your content.
  • app/layout.config.tsx: Shared options for layouts, optional but preferred to keep.
Route Description
app/(home) The route group for your landing page and other pages.
app/docs The documentation layout and pages.
app/api The documentation for API pages.
app/api/search/route.ts The Route Handler for search.

Fumadocs MDX

A source.config.ts config file has been included, you can customise different options like frontmatter schema.

Read the Introduction for further details.

Learn More

To learn more about Next.js and Fumadocs, take a look at the following resources: