Skip to content

feat: add inline mode to widget and live showcase#6

Merged
anurag629 merged 5 commits intocodercops:devfrom
anurag629:dev
Mar 7, 2026
Merged

feat: add inline mode to widget and live showcase#6
anurag629 merged 5 commits intocodercops:devfrom
anurag629:dev

Conversation

@anurag629
Copy link
Member

Summary

  • Adds mode: 'popup' | 'inline' config option to @chatcops/widget — inline mode renders the chat panel directly inside a container element
  • Exports Widget class for creating independent instances (multiple widgets on one page)
  • Creates /api/chat serverless endpoint on the docs website using @chatcops/server with OpenAI provider and FAQ knowledge base
  • Landing page now has both an inline widget demo ("See it in action") and a floating popup bubble
  • Docs pages get the popup widget via Starlight head config
  • Updated widget configuration and API reference docs with inline mode usage, attribute reference table, and React example
  • Gitignore auto-generated .astro/, .vercel/, and package-lock.json

Inline mode highlights

  • No FAB button, no welcome bubble, no close button in header
  • Panel fills 100% of container — developer controls sizing via CSS
  • data-mode="inline" data-container="#my-div" for script tag usage
  • container accepts CSS selector string or HTMLElement reference
  • Mobile responsive overrides skip inline panels

Test plan

  • All 102 tests pass
  • All packages build successfully
  • Website builds successfully
  • Verify inline widget renders in "See it in action" section
  • Verify popup bubble appears in bottom-right corner
  • Test chat interaction after adding OPENAI_API_KEY to Vercel env vars

Add a working ChatCops chat widget to the docs website as a live demo.
Uses @chatcops/server with Claude provider and FAQ knowledge base,
served via Vercel serverless function at /api/chat.
- Add mode: 'popup' | 'inline' config option to @chatcops/widget
- Inline mode renders chat panel inside a container element (no FAB, no bubble, no close button)
- Support data-mode and data-container attributes for script tag auto-init
- Export Widget class for creating independent instances
- Add /api/chat serverless endpoint using @chatcops/server with OpenAI provider
- Landing page: inline widget in "See it in action" section + popup bubble
- Docs pages: popup widget via Starlight head config
- Update widget configuration and API docs with inline mode usage
@vercel
Copy link

vercel bot commented Mar 7, 2026

@anurag629 is attempting to deploy a commit to the CODERCOPS Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Mar 7, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
chatcops-website Ready Ready Preview, Comment Mar 7, 2026 5:38pm

Request Review

@anurag629 anurag629 merged commit de19e6e into codercops:dev Mar 7, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant