Skip to content

feat: add embed app — standalone widget for external sites - #5

Merged
ladaniprem merged 1 commit into
masterfrom
10-embed-app
Jul 4, 2026
Merged

ladaniprem merged 1 commit into
masterfrom
10-embed-app

Conversation

@ladaniprem

@ladaniprem ladaniprem commented Jul 4, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • New Features

    • Added a self-initializing embed widget with a floating chat button, expandable panel, and support for showing, hiding, resizing, and destroying it.
    • Added a demo page and standalone landing page to preview the embed experience and related product flows.
    • Added configuration defaults for widget URL, organization ID, and screen position.
  • Documentation

    • Added extensive guidance for component usage, styling, theming, icons, forms, registries, and animation vocabulary.

@ladaniprem
ladaniprem requested a review from Copilot July 4, 2026 12:14
@coderabbitai

coderabbitai Bot commented Jul 4, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Free

Run ID: 21c03fbf-3008-4001-91ae-02a817d9a227

📥 Commits

Reviewing files that changed from the base of the PR and between 8ea2899 and 499b7fb.

⛔ Files ignored due to path filters (2)
  • apps/embed/.agents/skills/shadcn/assets/shadcn-small.png is excluded by !**/*.png
  • apps/embed/.agents/skills/shadcn/assets/shadcn.png is excluded by !**/*.png
📒 Files selected for processing (26)
  • apps/embed/.agents/skills/agent-browser/SKILL.md
  • apps/embed/.agents/skills/animation-vocabulary/SKILL.md
  • apps/embed/.agents/skills/shadcn/SKILL.md
  • apps/embed/.agents/skills/shadcn/agents/openai.yml
  • apps/embed/.agents/skills/shadcn/cli.md
  • apps/embed/.agents/skills/shadcn/customization.md
  • apps/embed/.agents/skills/shadcn/evals/evals.json
  • apps/embed/.agents/skills/shadcn/mcp.md
  • apps/embed/.agents/skills/shadcn/registry.md
  • apps/embed/.agents/skills/shadcn/rules/base-vs-radix.md
  • apps/embed/.agents/skills/shadcn/rules/composition.md
  • apps/embed/.agents/skills/shadcn/rules/forms.md
  • apps/embed/.agents/skills/shadcn/rules/icons.md
  • apps/embed/.agents/skills/shadcn/rules/styling.md
  • apps/embed/_extract_body.txt
  • apps/embed/_extract_head.txt
  • apps/embed/config.ts
  • apps/embed/demo.html
  • apps/embed/embed.ts
  • apps/embed/eslint.config.js
  • apps/embed/icons.ts
  • apps/embed/landing.html
  • apps/embed/package.json
  • apps/embed/tsconfig.json
  • apps/embed/vite-env.d.ts
  • apps/embed/vite.config.ts

📝 Walkthrough

Walkthrough

This PR adds a new apps/embed application implementing a floating chat widget (embed.ts, config, icons, demo/landing pages, build tooling), and separately adds documentation files for agent skills including shadcn, animation-vocabulary, and agent-browser under .agents/skills/.

Changes

Embed Widget Application

Layer / File(s) Summary
Widget script, icons, and config
apps/embed/embed.ts, apps/embed/icons.ts, apps/embed/config.ts, apps/embed/vite-env.d.ts
Implements a self-initializing floating chat widget with iframe-based rendering, postMessage handling for close/resize, and a global window.EchoWidget API; defines EMBED_CONFIG and icon SVG constants.
Build and lint tooling
apps/embed/package.json, apps/embed/tsconfig.json, apps/embed/vite.config.ts, apps/embed/eslint.config.js
Adds package manifest, TypeScript config, Vite library build config (IIFE bundle, dev server on port 3002), and ESLint config extending the workspace base.
Demo and landing pages
apps/embed/demo.html, apps/embed/landing.html, apps/embed/_extract_head.txt, apps/embed/_extract_body.txt
Adds a demo page with widget control buttons/config form, a full marketing landing page, and extracted HTML head/body fragments for a landing page template.

Estimated code review effort: 2 (Simple) | ~15 minutes

Agent Skill Documentation

Layer / File(s) Summary
Agent-browser and animation-vocabulary skills
apps/embed/.agents/skills/agent-browser/SKILL.md, apps/embed/.agents/skills/animation-vocabulary/SKILL.md
Adds a browser automation skill stub with observability instructions, and an animation terminology glossary for prompting.
Shadcn SKILL.md and agent config
apps/embed/.agents/skills/shadcn/SKILL.md, apps/embed/.agents/skills/shadcn/agents/openai.yml
Adds the main shadcn skill guide with critical rules, key patterns, component selection table, and workflows, plus agent interface metadata.
Shadcn CLI, registry, MCP, and customization docs
apps/embed/.agents/skills/shadcn/cli.md, .../registry.md, .../mcp.md, .../customization.md, .../evals/evals.json
Documents the shadcn CLI commands, registry authoring/addressing scheme, MCP server tools, theming/customization guidance, and evaluation cases.
Shadcn component rule guides
apps/embed/.agents/skills/shadcn/rules/*
Adds rule documents covering base-vs-radix API differences, composition patterns, forms, icons, and styling conventions.

Estimated code review effort: 1 (Trivial) | ~10 minutes


Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

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

@ladaniprem
ladaniprem merged commit d8139c3 into master Jul 4, 2026
2 of 3 checks passed

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a new apps/embed Vite-based project intended to ship a standalone, externally-embeddable widget bundle (IIFE) plus local demo/landing pages and supporting configuration.

Changes:

  • Adds a Vite “library mode” build that outputs an embeddable widget bundle.
  • Implements the widget loader (embed.ts) that injects a floating button + iframe and exposes a global control API.
  • Adds local demo/landing HTML plus project scaffolding (TypeScript, ESLint) and agent skill documentation under .agents/.

Reviewed changes

Copilot reviewed 25 out of 28 changed files in this pull request and generated 18 comments.

Show a summary per file
File Description
apps/embed/vite.config.ts Vite library build + dev server settings for the embed bundle.
apps/embed/vite-env.d.ts Declares import.meta.env.VITE_WIDGET_URL typing for Vite.
apps/embed/tsconfig.json TypeScript configuration for the embed app.
apps/embed/package.json New package definition and build/dev scripts for embed app.
apps/embed/landing.html Large static landing page intended for the embed app.
apps/embed/icons.ts Inline SVG strings used for the floating button icons.
apps/embed/eslint.config.js ESLint config wiring to shared workspace base config.
apps/embed/embed.ts Main embed loader: injects button/iframe, message handling, global API exposure.
apps/embed/demo.html Local demo page for testing the embed widget behavior/config.
apps/embed/config.ts Embed runtime config (widget URL, defaults).
apps/embed/.agents/skills/shadcn/SKILL.md Adds shadcn skill documentation content under embed app.
apps/embed/.agents/skills/shadcn/rules/styling.md shadcn styling rules documentation.
apps/embed/.agents/skills/shadcn/rules/icons.md shadcn icon usage rules documentation.
apps/embed/.agents/skills/shadcn/rules/forms.md shadcn forms rules documentation.
apps/embed/.agents/skills/shadcn/rules/composition.md shadcn component composition rules documentation.
apps/embed/.agents/skills/shadcn/rules/base-vs-radix.md shadcn base vs radix rules documentation.
apps/embed/.agents/skills/shadcn/registry.md shadcn registry authoring documentation.
apps/embed/.agents/skills/shadcn/mcp.md shadcn MCP usage documentation.
apps/embed/.agents/skills/shadcn/evals/evals.json shadcn eval definitions.
apps/embed/.agents/skills/shadcn/customization.md shadcn customization/theming documentation.
apps/embed/.agents/skills/shadcn/cli.md shadcn CLI reference documentation.
apps/embed/.agents/skills/shadcn/agents/openai.yml shadcn agent metadata configuration.
apps/embed/.agents/skills/animation-vocabulary/SKILL.md Animation vocabulary skill documentation.
apps/embed/.agents/skills/agent-browser/SKILL.md Agent-browser skill stub documentation.
apps/embed/_extract_head.txt Unreferenced extracted HTML head artifact.
apps/embed/_extract_body.txt Unreferenced extracted HTML body artifact.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread apps/embed/embed.ts
Comment on lines +119 to +123
function buildWidgetUrl(): string {
const params = new URLSearchParams();
params.append('organizationId', organizationId!);
return `${EMBED_CONFIG.WIDGET_URL}?${params.toString()}`;
}
Comment thread apps/embed/embed.ts
Comment on lines +125 to +140
function handleMessage(event: MessageEvent) {
if (event.origin !== new URL(EMBED_CONFIG.WIDGET_URL).origin) return;

const { type, payload } = event.data;

switch (type) {
case 'close':
hide();
break;
case 'resize':
if (payload.height && container) {
container.style.height = `${payload.height}px`;
}
break;
}
}
Comment thread apps/embed/embed.ts
Comment on lines +48 to +50
button = document.createElement('button');
button.id = 'echo-widget-button';
button.innerHTML = chatBubbleIcon;
Comment thread apps/embed/embed.ts
Comment on lines +161 to +163
// Change button icon to close
button.innerHTML = closeIcon;
}
Comment thread apps/embed/embed.ts
Comment on lines +175 to +178
// Change button icon back to chat
button.innerHTML = chatBubbleIcon;
button.style.background = '#3b82f6';
}
Comment thread apps/embed/landing.html
Comment on lines +7 to +8
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.tailwindcss.com"></script>
Comment on lines +1 to +3
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
Comment thread apps/embed/embed.ts
Comment on lines +181 to +183
function destroy() {
window.removeEventListener('message', handleMessage);
if (container) {
Comment on lines +1 to +3
<!-- Announcement Bar -->
<div class="bg-gradient-to-r from-brand-dark to-purple-600 text-white text-sm py-2.5 text-center relative overflow-hidden">
<div class="relative z-10 flex items-center justify-center gap-2">
Comment thread apps/embed/embed.ts
Comment on lines +101 to +111
// Create iframe
iframe = document.createElement('iframe');
iframe.src = buildWidgetUrl();
iframe.style.cssText = `
width: 100%;
height: 100%;
border: none;
`;
// Add permissions for microphone and clipboard
iframe.allow = 'microphone; clipboard-read; clipboard-write';

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.

2 participants