docs: add kapa askai inline to homepage

[unatasha8]

Adds Kapa's AskAI widget inline on homepage to promote the discoverability.

Checklist

• [ X] I have read the contributing guidelines and signed the CLA.
• I have referenced an issue containing the design document if my change introduces a new feature.
• [ X] I have read the security policy.
• [ X] I confirm that this pull request does not address a security vulnerability.
  If this pull request addresses a security vulnerability,
  I confirm that I got approval (please contact security@ory.com) from the maintainers to push the changes.
• I have added tests that prove my fix is effective or that my feature works.
• I have added the necessary documentation within the code base (if appropriate).

Summary by CodeRabbit

• New Features

  • Added an inline AI help widget on the “How to use” section, letting users ask questions directly from the page.
  • The AI widget now supports both inline and floating placement for easier access.

• Bug Fixes

  • Improved announcement banner spacing for cleaner paragraph and button layout.
  • Refined the widget loading flow so it opens more reliably and handles early interactions better.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR reworks KapaWidget to support a queue-safe initialization flow with an openKapa() helper and a new inline placement mode, embeds the widget inline in HowToUseSection's description, and adjusts spacing classes/CSS for the AnnouncementBanner component.

Changes

KapaWidget inline integration

Layer / File(s)	Summary
Kapa init helpers and openKapa src/theme/KapaWidget.tsx	Adds scriptInjected state, preinitKapa(), injectKapaScript(), and openKapa() helpers; accepts new placement prop and query state.
Placement-based UI rendering src/theme/KapaWidget.tsx	Renders inline ask form with submit/Enter handling when placement is "inline"; otherwise renders the floating button using openKapa(); updates button image alt text.
Inline widget usage in HowToUseSection src/components/welcomePage/HowToUseSection.tsx	Imports KapaWidget, updates paragraph text to reference the AI assistant, and renders the widget inline after that text.

Announcement banner spacing

Layer / File(s)	Summary
Banner padding and content margin adjustments src/components/AnnouncementBanner/AnnouncementBanner.tsx, src/components/AnnouncementBanner/AnnouncementBanner.module.css	Updates outer container and dismiss button spacing classes and adds a CSS rule zeroing paragraph margins within announcement content.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant KapaWidget
  participant WindowKapa as window.Kapa
  participant KapaBundle

  User->>KapaWidget: interact (click or submit query)
  KapaWidget->>KapaWidget: injectKapaScript() (first time only)
  KapaWidget->>WindowKapa: preinitKapa() queues calls
  KapaBundle-->>WindowKapa: bundle loads and initializes
  KapaWidget->>WindowKapa: openKapa({query, submit})
  WindowKapa->>KapaBundle: open widget with query

Loading

Possibly related PRs

• ory/docs#2549: Modifies the same AnnouncementBanner component's spacing and content that this PR further adjusts.

Suggested reviewers: aeneasr, vinckr, piotrmsc

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is too sparse for the template and omits the required related issue/design document section.	Add the Related Issue or Design Document section, expand the change summary, and complete the template sections for further comments and checklist details.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: adding an inline AskAI widget on the homepage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch una-askai-homepage

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/theme/KapaWidget.tsx`:
- Around line 95-137: The inline ask bar in KapaWidget currently submits only
via Enter and lacks a visible action control. Update the returned form in
KapaWidget to include a clearly visible submit button alongside the existing
input, wired to the same handleSubmit flow, so users can discover and tap/click
submission directly. Keep the existing onSubmit, query, and injectKapaScript
behavior intact while adding the new control with appropriate accessible
labeling.
- Around line 121-135: The text input in KapaWidget disables the default focus
outline without providing an alternative, so restore a visible keyboard focus
indicator for the inline ask bar. Update the inline input’s focus styling in the
KapaWidget component (the input with onFocus={injectKapaScript}) to show a clear
focus state, such as a visible outline or equivalent focus ring, while keeping
the current appearance otherwise.
- Line 125: The Kapa widget is being injected too early because the input’s
onFocus handler calls injectKapaScript, which loads the third-party script
before explicit user consent. Remove the focus-based preload from KapaWidget or
gate it behind an explicit consent action, and keep script injection only in
openKapa (or equivalent submit/click flow) so the remote widget loads only after
the user intentionally opens it.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: afa2a625-3366-4eef-937b-57c69a915f53

📥 Commits

Reviewing files that changed from the base of the PR and between e33c9e3 and 9d70852.

⛔ Files ignored due to path filters (1)

• src/content/announcement-banner.mdx is excluded by !**/*.mdx

📒 Files selected for processing (4)

• src/components/AnnouncementBanner/AnnouncementBanner.module.css
• src/components/AnnouncementBanner/AnnouncementBanner.tsx
• src/components/welcomePage/HowToUseSection.tsx
• src/theme/KapaWidget.tsx