feat: add embeddedable chat component

app/(audiences)/components/chat-bot-card.tsx

@@ -1,25 +1,40 @@
-import { Card, CardContent } from "@/components/ui/card";
+// External dependencies
 import Image from "next/image";
 import { MessageSquareShare } from "lucide-react";
+
+// Internal UI components
+import { Card, CardContent } from "@/components/ui/card";
 import { ChatBot } from "@/app/(audiences)/for-students/data/chatbots";
 
+// Component props interface
 interface ChatBotCardProps {
   chatbot: ChatBot;
 }
 
+/**
+ * ChatBotCard - A responsive card component that displays chatbot information
+ * Features:
+ * - Optimized image loading with WebP support and PNG fallback
+ * - Hover animations and transitions
+ * - Gradient text effects
+ * - Decorative corner accent
+ */
 export default function ChatBotCard({ chatbot }: ChatBotCardProps) {
+  // Extract base name from icon path for use in both WebP and PNG sources
   const baseIconName = chatbot.icon.split(".")[0];
 
   return (
     <Card className="group relative overflow-hidden bg-background-primary/50 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 backdrop-blur-sm border-2 border-border/40 hover:border-primary/20 duration-300 aspect-square">
       <CardContent className="p-8 h-full flex flex-col">
-        {/* Avatar with WebP and PNG fallback */}
+        {/* Avatar section with modern image format optimization */}
         <div className="flex-shrink-0 mb-6">
           <picture>
+            {/* WebP format for modern browsers */}
             <source
               srcSet={`/chatbots/${baseIconName}.webp`}
               type="image/webp"
             />
+            {/* PNG fallback for older browsers */}
             <Image
               src={`/chatbots/${baseIconName}.png`}
               alt={chatbot.title}
@@ -30,16 +45,19 @@ export default function ChatBotCard({ chatbot }: ChatBotCardProps) {
           </picture>
         </div>
 
-        {/* Content */}
+        {/* Main content section with flex layout for dynamic spacing */}
         <div className="flex-1 flex flex-col">
+          {/* Title with gradient text effect and hover animation */}
           <h3 className="text-xl font-bold text-text-primary truncate bg-gradient-to-r from-[#FF6B6B] via-[#4ECDC4] to-[#45B7D1] bg-clip-text text-transparent group-hover:tracking-wide transition-all duration-300 mb-3">
             {chatbot.title}
           </h3>
 
+          {/* Description with line clamping for consistent card heights */}
           <p className="text-base text-text-secondary line-clamp-3 mb-6 flex-1 leading-relaxed">
             {chatbot.description}
           </p>
 
+          {/* Interactive chat button with hover and active states */}
           <button
             className="flex-shrink-0 inline-flex items-center justify-center rounded-full bg-primary w-12 h-12 text-white transition-all duration-300 hover:scale-110 active:scale-95 hover:bg-primary/90 ml-auto"
             aria-label="開始對話"
@@ -49,7 +67,7 @@ export default function ChatBotCard({ chatbot }: ChatBotCardProps) {
         </div>
       </CardContent>
 
-      {/* Decorative corner accent */}
+      {/* Decorative gradient corner accent with hover animation */}
       <div className="absolute top-0 right-0 w-20 h-20 overflow-hidden">
         <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-bl from-primary/10 via-primary/5 to-transparent transform rotate-45 translate-x-10 -translate-y-10 group-hover:translate-x-8 group-hover:-translate-y-8 transition-transform duration-300" />
       </div>

app/(audiences)/components/chat-bot-grid-skeleton.tsx

@@ -1,22 +1,36 @@
+/**
+ * ChatBotGridSkeleton - A loading placeholder component that displays a grid of skeleton cards
+ * Used to show a loading state while chat bot data is being fetched
+ * Renders 6 identical skeleton cards in a responsive grid layout
+ */
 export default function ChatBotGridSkeleton() {
   return (
+    // Responsive grid container: 1 column (mobile), 2 columns (sm), 3 columns (lg)
     <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {/* Generate 6 skeleton cards using Array constructor and map */}
       {[...Array(6)].map((_, index) => (
         <div
           key={index}
           className="animate-pulse rounded-lg border border-gray-200 bg-white p-6 shadow-sm"
         >
+          {/* Header section with avatar and status indicator */}
           <div className="mb-4 flex items-center justify-between">
-            <div className="h-8 w-8 rounded-full bg-gray-200" />
-            <div className="h-6 w-24 rounded-full bg-gray-200" />
+            <div className="h-8 w-8 rounded-full bg-gray-200" />{" "}
+            {/* Avatar placeholder */}
+            <div className="h-6 w-24 rounded-full bg-gray-200" />{" "}
+            {/* Status indicator placeholder */}
           </div>
 
+          {/* Title placeholder */}
           <div className="mb-2 h-6 w-3/4 rounded bg-gray-200" />
+
+          {/* Description text placeholders - two lines */}
           <div className="mb-4 space-y-2">
             <div className="h-4 w-full rounded bg-gray-200" />
             <div className="h-4 w-5/6 rounded bg-gray-200" />
           </div>
 
+          {/* Action button placeholder */}
           <div className="h-10 w-full rounded-lg bg-gray-200" />
         </div>
       ))}

app/(audiences)/components/chat-bot-grid.tsx

@@ -1,9 +1,16 @@
 "use client";
 
+// Core React imports
 import { useState, useEffect } from "react";
+// Local component imports
 import ChatBotCard from "./chat-bot-card";
+// Type definitions and data
 import { ChatBot } from "@/app/(audiences)/for-students/data/chatbots";
 
+/**
+ * Props interface for the Section component that displays a group of chatbots
+ * in a responsive grid layout with a title and subtitle
+ */
 interface SectionProps {
   title: string;
   subtitle: string;
@@ -11,6 +18,10 @@ interface SectionProps {
   columns?: number;
 }
 
+/**
+ * Renders a section of chatbots with a header and responsive grid layout
+ * Returns null if no bots are provided
+ */
 function Section({ title, subtitle, bots, columns = 4 }: SectionProps) {
   if (bots.length === 0) return null;
 
@@ -20,6 +31,7 @@ function Section({ title, subtitle, bots, columns = 4 }: SectionProps) {
         <h2 className="text-2xl font-bold text-text-primary mb-2">{title}</h2>
         <p className="text-text-secondary">{subtitle}</p>
       </div>
+      {/* Responsive grid: 1 column on mobile, 2 on sm screens, configurable columns on lg */}
       <div className={`grid gap-4 sm:grid-cols-2 lg:grid-cols-${columns}`}>
         {bots.map((chatbot) => (
           <ChatBotCard key={chatbot.id} chatbot={chatbot} />
@@ -29,6 +41,10 @@ function Section({ title, subtitle, bots, columns = 4 }: SectionProps) {
   );
 }
 
+/**
+ * Props interface for the main ChatBotGrid component
+ * Includes filter criteria and functions to fetch different bot categories
+ */
 interface ChatBotGridProps {
   selectedCategories: string[];
   selectedSubjects: string[];
@@ -38,6 +54,11 @@ interface ChatBotGridProps {
   getAllBots: () => ChatBot[];
 }
 
+/**
+ * Main component that displays a filterable grid of chatbots
+ * Supports filtering by category, subject, and search query
+ * Shows different sections based on filter state
+ */
 export default function ChatBotGrid({
   selectedCategories,
   selectedSubjects,
@@ -46,7 +67,7 @@ export default function ChatBotGrid({
   getTrendingBots,
   getAllBots,
 }: ChatBotGridProps) {
-  // Initialize state with the passed-in functions
+  // Initialize state with lazy evaluation using callback functions
   const [filteredPopularBots, setFilteredPopularBots] = useState<ChatBot[]>(
     () => getPopularBots(),
   );
@@ -57,10 +78,15 @@ export default function ChatBotGrid({
     getAllBots(),
   );
 
+  /**
+   * Effect to filter bots whenever filter criteria or bot data changes
+   * Applies search query, category, and subject filters
+   */
   useEffect(() => {
     const filterBots = (bots: ChatBot[]) => {
       let filtered = bots;
 
+      // Apply text search filter across multiple fields
       if (searchQuery) {
         const query = searchQuery.toLowerCase();
         filtered = filtered.filter(
@@ -72,12 +98,14 @@ export default function ChatBotGrid({
         );
       }
 
+      // Apply category filter if categories are selected
       if (selectedCategories.length > 0) {
         filtered = filtered.filter(
           (bot) => bot.category && selectedCategories.includes(bot.category),
         );
       }
 
+      // Apply subject filter if subjects are selected
       if (selectedSubjects.length > 0) {
         filtered = filtered.filter((bot) =>
           selectedSubjects.includes(bot.subject),
@@ -87,6 +115,7 @@ export default function ChatBotGrid({
       return filtered;
     };
 
+    // Update all filtered bot lists
     setFilteredPopularBots(filterBots(getPopularBots()));
     setFilteredTrendingBots(filterBots(getTrendingBots()));
     setFilteredAllBots(filterBots(getAllBots()));
@@ -99,9 +128,11 @@ export default function ChatBotGrid({
     getAllBots,
   ]);
 
+  // Check if any filters are active
   const hasFiltersOrSearch =
     selectedCategories.length > 0 || selectedSubjects.length > 0 || searchQuery;
 
+  // When filters are active, show only search results
   if (hasFiltersOrSearch) {
     return (
       <Section
@@ -113,12 +144,14 @@ export default function ChatBotGrid({
     );
   }
 
+  // Filter bots by category and subject for different sections
   const tutorBots = filteredAllBots.filter((bot) => bot.category === "教育");
   const teachingBots = filteredAllBots.filter((bot) => bot.subject === "教學");
   const assessmentBots = filteredAllBots.filter(
     (bot) => bot.subject === "評量",
   );
 
+  // Default view showing multiple sections of categorized bots
   return (
     <div className="space-y-8">
       <Section

app/(audiences)/components/search-bar.tsx

@@ -1,12 +1,25 @@
 "use client";
 
+/**
+ * Props interface for the SearchBar component
+ * @property onSearch - Callback function triggered when search input changes
+ */
 interface SearchBarProps {
   onSearch: (query: string) => void;
 }
 
+/**
+ * SearchBar component that provides a styled search input with an icon
+ * Features:
+ * - Real-time search with onChange event
+ * - Glassmorphic design with backdrop blur
+ * - Responsive width with max-width constraint
+ * - Animated focus state with primary color ring
+ */
 export default function SearchBar({ onSearch }: SearchBarProps) {
   return (
     <div className="relative max-w-full mx-auto">
+      {/* Search input field with glassmorphic styling */}
       <input
         type="text"
         placeholder="搜尋 PlayGO AI..."
@@ -15,6 +28,7 @@ export default function SearchBar({ onSearch }: SearchBarProps) {
                  backdrop-blur-sm shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50
                  text-lg transition-all duration-200 placeholder:text-text-secondary/50"
       />
+      {/* Search icon positioned absolutely within the input */}
       <svg
         className="absolute left-4 top-1/2 h-6 w-6 -translate-y-1/2 text-text-secondary/50"
         fill="none"

app/(audiences)/components/subject-faceted-filter.tsx

@@ -1,7 +1,10 @@
 "use client";
 
+// External library imports
 import * as React from "react";
 import { Check, PlusCircle } from "lucide-react";
+
+// Internal utility and component imports
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -21,6 +24,13 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 
+/**
+ * Interface for the faceted filter component props
+ * @param title - Display name for the filter
+ * @param options - Array of filter options with labels and values
+ * @param selectedValues - Currently selected filter values
+ * @param onSelectionChange - Callback function when selection changes
+ */
 interface DataTableFacetedFilterProps {
   title: string;
   options: {
@@ -31,6 +41,14 @@ interface DataTableFacetedFilterProps {
   onSelectionChange: (values: string[]) => void;
 }
 
+/**
+ * A faceted filter component for data tables that supports multiple selection
+ * Features:
+ * - Displays selected items as badges
+ * - Supports search functionality
+ * - Responsive design with different displays for mobile/desktop
+ * - Clear all selections option
+ */
 export function DataTableFacetedFilter({
   title,
   options,
@@ -47,15 +65,18 @@ export function DataTableFacetedFilter({
         >
           <PlusCircle className="mr-3 h-6 w-6" />
           {title}
+          {/* Display selected values section */}
           {selectedValues?.length > 0 && (
             <>
               <Separator orientation="vertical" className="mx-4 h-8" />
+              {/* Mobile view: Show count of selected items */}
               <Badge
                 variant="secondary"
                 className="rounded-md px-3 py-1.5 text-base font-normal lg:hidden"
               >
                 {selectedValues.length}
               </Badge>
+              {/* Desktop view: Show either all selected items (if ≤2) or count */}
               <div className="hidden space-x-2 lg:flex">
                 {selectedValues.length > 2 ? (
                   <Badge
@@ -82,6 +103,7 @@ export function DataTableFacetedFilter({
           )}
         </Button>
       </PopoverTrigger>
+      {/* Dropdown content with search and selection options */}
       <PopoverContent className="w-[320px] p-0" align="start">
         <Command>
           <CommandInput
@@ -91,6 +113,7 @@ export function DataTableFacetedFilter({
           <CommandList>
             <CommandEmpty>找不到結果</CommandEmpty>
             <CommandGroup>
+              {/* Map through options and handle selection/deselection */}
               {options.map((option) => {
                 const isSelected = selectedValues.includes(option.value);
                 return (
@@ -98,17 +121,20 @@ export function DataTableFacetedFilter({
                     key={option.value}
                     onSelect={() => {
                       if (isSelected) {
+                        // Remove value if already selected
                         onSelectionChange(
                           selectedValues.filter(
                             (value) => value !== option.value,
                           ),
                         );
                       } else {
+                        // Add value to selection
                         onSelectionChange([...selectedValues, option.value]);
                       }
                     }}
                     className="p-4 text-lg"
                   >
+                    {/* Custom checkbox implementation */}
                     <div
                       className={cn(
                         "mr-4 flex h-6 w-6 items-center justify-center rounded-sm border-2 border-primary",
@@ -124,6 +150,7 @@ export function DataTableFacetedFilter({
                 );
               })}
             </CommandGroup>
+            {/* Show clear filter option when items are selected */}
             {selectedValues.length > 0 && (
               <>
                 <CommandSeparator />

app/(audiences)/components/subject-filter-view-options.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+// External dependencies
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { Table } from "@tanstack/react-table";
 import { Settings2 } from "lucide-react";
 
+// Internal UI components
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -13,15 +15,27 @@ import {
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
 
+/**
+ * Props interface for the DataTableViewOptions component
+ * @template TData - Generic type parameter for the table data
+ */
 interface DataTableViewOptionsProps<TData> {
   table: Table<TData>;
 }
 
+/**
+ * DataTableViewOptions - A component that renders a dropdown menu for toggling column visibility
+ * in a data table. It provides a UI for users to show/hide specific columns.
+ *
+ * @template TData - Generic type parameter representing the table data structure
+ * @param {DataTableViewOptionsProps<TData>} props - Component props containing the table instance
+ */
 export function DataTableViewOptions<TData>({
   table,
 }: DataTableViewOptionsProps<TData>) {
   return (
     <DropdownMenu>
+      {/* Trigger button for the dropdown menu - only visible on large screens */}
       <DropdownMenuTrigger asChild>
         <Button
           variant="outline"
@@ -35,10 +49,12 @@ export function DataTableViewOptions<TData>({
       <DropdownMenuContent align="end" className="w-[150px]">
         <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
         <DropdownMenuSeparator />
+        {/* Map through all available columns and create toggle options */}
         {table
           .getAllColumns()
           .filter(
             (column) =>
+              // Only include columns that have an accessor function and can be hidden
               typeof column.accessorFn !== "undefined" && column.getCanHide(),
           )
           .map((column) => {

app/(audiences)/components/subject-filter.tsx

@@ -1,27 +1,43 @@
 "use client";
 
+// External dependencies
 import * as React from "react";
+import { X } from "lucide-react";
+
+// Internal dependencies - data
 import { categories, subjects } from "@/app/(audiences)/for-students/data/data";
+// Internal dependencies - components
 import { DataTableFacetedFilter } from "@/app/(audiences)/components/subject-faceted-filter";
 import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
 
+// Interface defining the required props for the SubjectFilter component
 interface SubjectFilterProps {
+  // Array of currently selected category IDs/names
   selectedCategories: string[];
+  // Callback to update selected categories
   setSelectedCategories: (categories: string[]) => void;
+  // Array of currently selected subject IDs/names
   selectedSubjects: string[];
+  // Callback to update selected subjects
   setSelectedSubjects: (subjects: string[]) => void;
 }
 
+/**
+ * SubjectFilter Component
+ * Renders a filter interface for subjects and categories with reset functionality
+ * Used for filtering educational content based on subjects and categories
+ */
 export function SubjectFilter({
   selectedCategories,
   setSelectedCategories,
   selectedSubjects,
   setSelectedSubjects,
 }: SubjectFilterProps) {
+  // Track if any filters are currently applied
   const isFiltered =
     selectedCategories.length > 0 || selectedSubjects.length > 0;
 
+  // Handler to reset all filters to their initial state
   const handleReset = () => {
     setSelectedCategories([]);
     setSelectedSubjects([]);
@@ -30,18 +46,21 @@ export function SubjectFilter({
   return (
     <div className="flex items-center justify-between">
       <div className="flex flex-1 items-center space-x-6">
+        {/* Subject filter dropdown */}
         <DataTableFacetedFilter
-          title="科目"
+          title="科目" // "Subject" in Chinese
           options={subjects}
           selectedValues={selectedSubjects}
           onSelectionChange={setSelectedSubjects}
         />
+        {/* Category filter dropdown */}
         <DataTableFacetedFilter
-          title="類別"
+          title="類別" // "Category" in Chinese
           options={categories}
           selectedValues={selectedCategories}
           onSelectionChange={setSelectedCategories}
         />
+        {/* Reset button - only shown when filters are applied */}
         {isFiltered && (
           <Button
             variant="ghost"
@@ -49,7 +68,7 @@ export function SubjectFilter({
             onClick={handleReset}
             className="h-16 px-6 text-lg"
           >
-            重設
+            重設 {/* "Reset" in Chinese */}
             <X className="ml-3 h-6 w-6" />
           </Button>
         )}

app/(audiences)/for-students/page.tsx

@@ -1,41 +1,55 @@
 "use client";
 
+// External dependencies
 import * as React from "react";
 import { Suspense } from "react";
+
+// Internal component imports
 import ChatBotGrid from "@/app/(audiences)/components/chat-bot-grid";
 import { SubjectFilter } from "@/app/(audiences)/components/subject-filter";
 import SearchBar from "@/app/(audiences)/components/search-bar";
 import ChatBotGridSkeleton from "@/app/(audiences)/components/chat-bot-grid-skeleton";
 import { getPopularBots, getTrendingBots, getAllBots } from "./data/chatbots";
 
+/**
+ * ForStudentsPage Component
+ * Main page component for the student-focused section of the application.
+ * Provides a searchable and filterable interface for students to discover AI chatbots.
+ */
 export default function ForStudentsPage() {
+  // State management for filters and search
   const [selectedCategories, setSelectedCategories] = React.useState<string[]>(
     [],
   );
   const [selectedSubjects, setSelectedSubjects] = React.useState<string[]>([]);
   const [searchQuery, setSearchQuery] = React.useState<string>("");
 
+  // Handler for search input updates
   const handleSearch = (query: string) => {
     setSearchQuery(query);
   };
 
   return (
     <main className="min-h-screen bg-background-primary">
-      {/* Hero Section */}
+      {/* Hero Section - Main title and description */}
       <section className="mb-12 pt-16 text-center">
         <h1 className="mb-4 text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
           PlayGO for Students
         </h1>
+        {/* Description in Traditional Chinese: "Explore AI chatbots suitable for learning and improve learning efficiency!" */}
         <p className="mx-auto max-w-2xl text-lg text-text-secondary">
           探索適合學習的 AI 聊天機器人，提升學習效率！
         </p>
       </section>
 
-      {/* Search and Filter Section */}
+      {/* Interactive Controls Section */}
       <div className="container mx-auto px-4">
+        {/* Search functionality */}
         <div className="mb-8">
           <SearchBar onSearch={handleSearch} />
         </div>
+
+        {/* Category and subject filtering system */}
         <div className="mb-12">
           <SubjectFilter
             selectedCategories={selectedCategories}
@@ -45,7 +59,7 @@ export default function ForStudentsPage() {
           />
         </div>
 
-        {/* Chatbots Grid */}
+        {/* Chatbot Display Section with loading state handling */}
         <Suspense fallback={<ChatBotGridSkeleton />}>
           <ChatBotGrid
             selectedCategories={selectedCategories}

app/(audiences)/for-teachers/page.tsx

@@ -1,27 +1,45 @@
 "use client";
 
+// React and core imports
 import * as React from "react";
 import { Suspense } from "react";
+
+// Component imports
 import ChatBotGrid from "@/app/(audiences)/components/chat-bot-grid";
 import { SubjectFilter } from "@/app/(audiences)/components/subject-filter";
 import SearchBar from "@/app/(audiences)/components/search-bar";
 import ChatBotGridSkeleton from "@/app/(audiences)/components/chat-bot-grid-skeleton";
+
+// Data fetching utilities
 import { getPopularBots, getTrendingBots, getAllBots } from "./data/chatbots";
 
+/**
+ * ForTeachersPage Component
+ *
+ * Main page component for the teachers' section that displays a searchable and filterable
+ * grid of AI chatbots specifically curated for educational purposes.
+ *
+ * Features:
+ * - Category and subject filtering
+ * - Search functionality
+ * - Responsive grid layout with loading skeleton
+ */
 export default function ForTeachersPage() {
+  // State management for filters and search
   const [selectedCategories, setSelectedCategories] = React.useState<string[]>(
     [],
   );
   const [selectedSubjects, setSelectedSubjects] = React.useState<string[]>([]);
   const [searchQuery, setSearchQuery] = React.useState<string>("");
 
+  // Handler for search input updates
   const handleSearch = (query: string) => {
     setSearchQuery(query);
   };
 
   return (
     <main className="min-h-screen bg-background-primary">
-      {/* Hero Section */}
+      {/* Hero Section - Main title and description in Chinese */}
       <section className="mb-12 pt-16 text-center">
         <h1 className="mb-4 text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
           PlayGO for Teachers
@@ -31,11 +49,14 @@ export default function ForTeachersPage() {
         </p>
       </section>
 
-      {/* Search and Filter Section */}
+      {/* Interactive controls section */}
       <div className="container mx-auto px-4">
+        {/* Search functionality */}
         <div className="mb-8">
           <SearchBar onSearch={handleSearch} />
         </div>
+
+        {/* Category and subject filtering controls */}
         <div className="mb-12">
           <SubjectFilter
             selectedCategories={selectedCategories}
@@ -45,7 +66,7 @@ export default function ForTeachersPage() {
           />
         </div>
 
-        {/* Chatbots Grid */}
+        {/* Chatbot grid with loading fallback */}
         <Suspense fallback={<ChatBotGridSkeleton />}>
           <ChatBotGrid
             selectedCategories={selectedCategories}

app/api/embed/route.ts

@@ -0,0 +1,109 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
+
+  // Return the actual embed.js content directly instead of loading it from a file
+  const embedScript = `
+    (function() {
+      console.log('Initializing PlayGo Chat Widget');
+
+      function createChatWidget(config) {
+        console.log('Creating chat widget with config:', config);
+
+        const iframe = document.createElement('iframe');
+
+        const iframeStyles = {
+          border: 'none',
+          position: 'fixed',
+          bottom: '0',
+          right: '0',
+          width: '380px',
+          height: '100px',
+          maxHeight: '600px',
+          zIndex: '9999',
+          background: 'none',
+          pointerEvents: 'all',
+          transition: 'height 0.5s ease-in-out',
+          overflow: 'hidden',
+        };
+
+        Object.assign(iframe.style, iframeStyles);
+
+        iframe.onload = function() {
+          const style = document.createElement('style');
+          style.textContent = \`
+            ::-webkit-scrollbar {
+              display: none !important;
+            }
+            * {
+              -ms-overflow-style: none !important;
+              scrollbar-width: none !important;
+            }
+          \`;
+          iframe.contentDocument.head.appendChild(style);
+        };
+
+        const queryParams = new URLSearchParams(config).toString();
+        const chatUrl = '${baseUrl}/embed/chat?' + queryParams;
+        console.log('Chat URL:', chatUrl);
+
+        iframe.src = chatUrl;
+
+        window.addEventListener('message', function(event) {
+          console.log('Received message:', event.data);
+          if (event.data.type === 'CHAT_READY') {
+            console.log('Chat widget ready');
+          } else if (event.data.type === 'chatOpen') {
+            iframe.style.height = '600px';
+          } else if (event.data.type === 'chatClose') {
+            iframe.style.height = '100px';
+          }
+        });
+
+        return iframe;
+      }
+
+      window.playgo = function(action, config) {
+        console.log('PlayGo action called:', action, config);
+
+        if (action === 'init') {
+          try {
+            const existingWidget = document.getElementById('playgo-chat-widget');
+            if (existingWidget) {
+              existingWidget.remove();
+            }
+
+            const widget = createChatWidget(config);
+            widget.id = 'playgo-chat-widget';
+            document.body.appendChild(widget);
+
+            console.log('PlayGo chat initialized successfully');
+          } catch (error) {
+            console.error('Error initializing PlayGo chat:', error);
+          }
+        }
+      };
+
+      if (window.PlayGoChatWidget && window.PlayGoChatWidget.q) {
+        console.log('Processing queued commands:', window.PlayGoChatWidget.q);
+        window.PlayGoChatWidget.q.forEach(args => {
+          window.playgo.apply(null, args);
+        });
+      }
+
+      if (window.PlayGoChatWidget) {
+        window.PlayGoChatWidget.ready = true;
+      }
+
+      console.log('PlayGo Chat Widget initialization complete');
+    })();
+  `;
+
+  return new NextResponse(embedScript, {
+    headers: {
+      'Content-Type': 'application/javascript',
+      'Cache-Control': 'no-store, max-age=0',
+    },
+  });
+}

app/components/embeddable-chat-bot.tsx

@@ -0,0 +1,374 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useChat } from "ai/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+type MessageWithLoading = {
+  content: string;
+  role: string;
+  isStreaming?: boolean;
+};
+
+// Define theme CSS variables
+const themeStyles = {
+  light: {
+    '--bg-primary': '#ffffff',
+    '--bg-secondary': 'rgba(243, 244, 246, 0.7)',
+    '--text-primary': '#111827',
+    '--text-secondary': '#6B7280',
+    '--border-color': 'rgba(229, 231, 235, 0.5)',
+    '--shadow-color': 'rgba(0, 0, 0, 0.1)',
+    '--message-bg': 'rgba(243, 244, 246, 0.7)',
+    '--input-bg': 'rgba(255, 255, 255, 0.9)',
+  },
+  dark: {
+    '--bg-primary': '#1F2937',
+    '--bg-secondary': 'rgba(31, 41, 55, 0.7)',
+    '--text-primary': '#F9FAFB',
+    '--text-secondary': '#D1D5DB',
+    '--border-color': 'rgba(75, 85, 99, 0.5)',
+    '--shadow-color': 'rgba(0, 0, 0, 0.3)',
+    '--message-bg': 'rgba(55, 65, 81, 0.7)',
+    '--input-bg': 'rgba(31, 41, 55, 0.9)',
+  },
+} as const;
+
+// Inject required styles into iframe
+const injectStyles = `
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  }
+
+  .playgo-chat {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .playgo-chat-header {
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .playgo-chat-messages {
+    background-color: var(--bg-primary);
+  }
+
+  .playgo-chat-input {
+    background-color: var(--bg-secondary);
+    border-top: 1px solid var(--border-color);
+  }
+
+  .playgo-chat-input-field {
+    background-color: var(--input-bg);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    padding: 0.75rem 3rem 0.75rem 0.75rem;
+    width: 100%;
+    transition: all 0.2s;
+  }
+
+  .playgo-chat-input-field:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
+  }
+
+  .playgo-chat-input-field::placeholder {
+    color: var(--text-secondary);
+  }
+
+  .playgo-message-bubble {
+    box-shadow: 0 1px 2px var(--shadow-color);
+    max-width: 80%;
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+  }
+
+  .playgo-message-assistant {
+    background-color: var(--message-bg);
+    color: var(--text-primary);
+    margin-right: 1rem;
+  }
+
+  .playgo-message-user {
+    background-color: var(--primary-color);
+    color: white;
+    margin-left: 1rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .playgo-chat[data-theme="system"] {
+      --bg-primary: #1F2937;
+      --bg-secondary: rgba(31, 41, 55, 0.7);
+      --text-primary: #F9FAFB;
+      --text-secondary: #D1D5DB;
+      --border-color: rgba(75, 85, 99, 0.5);
+      --shadow-color: rgba(0, 0, 0, 0.3);
+      --message-bg: rgba(55, 65, 81, 0.7);
+      --input-bg: rgba(31, 41, 55, 0.9);
+    }
+  }
+`;
+
+interface EmbeddableChatBotConfig {
+  apiUrl?: string;
+  height?: string | number;
+  width?: string | number;
+  theme?: 'light' | 'dark' | 'system';
+  primaryColor?: string;
+  placeholder?: string;
+  buttonText?: string;
+}
+
+// First, let's fix the CSS type error by declaring the CSS custom properties
+declare module 'react' {
+  interface CSSProperties {
+    '--primary-color'?: string;
+    '--primary-rgb'?: string;
+    '--bg-primary'?: string;
+    '--bg-secondary'?: string;
+    '--text-primary'?: string;
+    '--text-secondary'?: string;
+    '--border-color'?: string;
+    '--shadow-color'?: string;
+    '--message-bg'?: string;
+    '--input-bg'?: string;
+  }
+}
+
+export default function EmbeddableChatBot({
+  apiUrl = "/api/landing_page_chat",
+  theme = 'system',
+  primaryColor = "#FF6B6B",
+  placeholder = "請問任何關於學習的問題...",
+  buttonText = "需要協助嗎？",
+}: EmbeddableChatBotConfig) {
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<MessageWithLoading[]>([]);
+  const [currentTheme, setCurrentTheme] = useState(theme);
+
+  // Convert hex color to RGB for CSS variables
+  const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ?
+      `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
+      : '255, 107, 107'; // fallback RGB for #FF6B6B
+  };
+
+  const {
+    input,
+    handleInputChange,
+    handleSubmit,
+    isLoading,
+  } = useChat({
+    api: apiUrl,
+    onError: (error) => {
+      console.error("Chat error:", error);
+    },
+    onFinish: () => {
+      setMessages((prev) =>
+        prev.map((msg) => ({ ...msg, isStreaming: false }))
+      );
+    },
+  });
+
+  // Handle system theme changes
+  useEffect(() => {
+    if (theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = (e: MediaQueryListEvent) => {
+        setCurrentTheme(e.matches ? 'dark' : 'light');
+      };
+
+      mediaQuery.addEventListener('change', handleChange);
+      setCurrentTheme(mediaQuery.matches ? 'dark' : 'light');
+
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    } else {
+      setCurrentTheme(theme);
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  // Inject styles when component mounts
+  useEffect(() => {
+    if (isOpen && chatContainerRef.current) {
+      const styleSheet = document.createElement('style');
+      styleSheet.textContent = injectStyles;
+      chatContainerRef.current.appendChild(styleSheet);
+    }
+  }, [isOpen]);
+
+  const containerStyle = {
+    ...(themeStyles[currentTheme === 'system' ? 'light' : currentTheme]),
+    '--primary-color': primaryColor,
+    '--primary-rgb': hexToRgb(primaryColor),
+  } as React.CSSProperties;
+
+  // Send message to parent when chat state changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.parent.postMessage({
+        type: isOpen ? 'chatOpen' : 'chatClose'
+      }, '*');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return (
+      <div className="w-full h-full flex items-center justify-end">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="bg-primary text-white rounded-full p-4
+                   transition-colors duration-200
+                   inline-flex items-center"
+          style={{ backgroundColor: primaryColor }}
+        >
+          <span className="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+              />
+            </svg>
+            {buttonText}
+          </span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={chatContainerRef}
+      className="w-full h-full rounded-2xl"
+      style={{
+        ...containerStyle,
+        overflow: 'hidden',
+      }}
+      data-theme={theme}
+    >
+      <div 
+        className="playgo-chat-container rounded-2xl bg-background-primary w-full h-full"
+        style={{ 
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          overflow: 'hidden'
+        }}
+      >
+        <div className="flex flex-col h-full absolute inset-0">
+          <div className="playgo-chat-header p-4 flex justify-between items-center flex-shrink-0">
+            <h2 className="text-xl font-bold">
+              <span className="text-[#FF6B6B]">P</span>
+              <span className="text-[#4ECDC4]">l</span>
+              <span className="text-[#45B7D1]">a</span>
+              <span className="text-[#FDCB6E]">y</span>
+              <span className="text-[#FF6B6B]">G</span>
+              <span className="text-[#4ECDC4]">o</span>
+              <span className="ml-2 text-[#45B7D1]">A</span>
+              <span className="text-[#FDCB6E]">I</span>
+            </h2>
+            <button 
+              onClick={() => setIsOpen(false)}
+              className="p-1 hover:bg-background-secondary/50 rounded-full transition-colors"
+            >
+              <XMarkIcon className="w-6 h-6 text-text-secondary" />
+            </button>
+          </div>
+
+          <div className="flex-1 relative">
+            <div 
+              className="playgo-chat-messages absolute inset-0 overflow-y-auto p-4 space-y-4"
+              style={{ 
+                overscrollBehavior: 'contain',
+                WebkitOverflowScrolling: 'touch'
+              }}
+            >
+              {messages.map((message, index) => (
+                <div
+                  key={index}
+                  className={`flex ${
+                    message.role === "user" ? "justify-end" : "justify-start"
+                  }`}
+                >
+                  <div
+                    className={`playgo-message-bubble ${
+                      message.role === "user" 
+                        ? "playgo-message-user" 
+                        : "playgo-message-assistant"
+                    }`}
+                  >
+                    {message.content}
+                    {message.isStreaming && (
+                      <span className="ml-1 animate-pulse">...</span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <form
+            onSubmit={handleSubmit}
+            className="playgo-chat-input p-4 flex-shrink-0"
+          >
+            <div className="relative">
+              <input
+                type="text"
+                value={input}
+                onChange={handleInputChange}
+                placeholder={placeholder}
+                className="playgo-chat-input-field"
+              />
+              <button
+                type="submit"
+                disabled={isLoading || !input.trim()}
+                className="absolute right-2 top-1/2 -translate-y-1/2 p-2
+                         text-primary hover:text-primary/80 disabled:opacity-50
+                         transition-colors duration-200"
+                style={{ color: primaryColor }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-6 h-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+                  />
+                </svg>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+} 

app/components/landing-page-chat-bot.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+// Core React and AI chat hooks
 import { useState, useRef, useEffect } from "react";
 import { useChat } from "ai/react";
+// UI Icons for example prompts
 import {
   AcademicCapIcon,
   ClockIcon,
@@ -10,15 +12,17 @@ import {
   BriefcaseIcon,
 } from "@heroicons/react/24/outline";
 
+// Extends the basic message type to include streaming state
 type MessageWithLoading = {
   content: string;
   role: string;
   isStreaming?: boolean;
 };
 
+// Predefined example prompts for users to quickly start conversations
 const EXAMPLE_PROMPTS = [
   {
-    title: "教案規劃",
+    title: "教案規劃", // Lesson Planning
     prompt: "我想規劃一堂關於數學的課程",
     icon: AcademicCapIcon,
   },
@@ -45,6 +49,7 @@ const EXAMPLE_PROMPTS = [
 ];
 
 export default function LandingPageChatBot() {
+  // Initialize chat functionality with error handling and streaming support
   const {
     messages: rawMessages,
     input,
@@ -60,6 +65,7 @@ export default function LandingPageChatBot() {
     },
     onFinish: (message) => {
       console.log("Chat finished:", message);
+      // Reset streaming state when message is complete
       setMessages((prev) =>
         prev.map((msg) => ({ ...msg, isStreaming: false })),
       );
@@ -67,10 +73,12 @@ export default function LandingPageChatBot() {
     keepLastMessageOnError: true,
   });
 
+  // Refs and state management
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const [hasInteracted, setHasInteracted] = useState(false);
   const [messages, setMessages] = useState<MessageWithLoading[]>([]);
 
+  // Update messages with streaming state when new messages arrive
   useEffect(() => {
     setMessages(
       rawMessages.map((msg, index) => ({
@@ -83,6 +91,7 @@ export default function LandingPageChatBot() {
     );
   }, [rawMessages, isLoading]);
 
+  // Auto-scroll chat to bottom when new messages arrive
   const scrollToBottom = () => {
     if (chatContainerRef.current) {
       const { scrollHeight, clientHeight } = chatContainerRef.current;
@@ -94,6 +103,7 @@ export default function LandingPageChatBot() {
     scrollToBottom();
   }, [messages]);
 
+  // Message handling functions
   const sendMessage = async (text: string) => {
     setHasInteracted(true);
     await append({
@@ -110,8 +120,10 @@ export default function LandingPageChatBot() {
   return (
     <section className="w-full h-[1000px] bg-gradient-to-b from-background-secondary to-background-primary flex items-center justify-center px-4">
       <div className="w-full max-w-5xl mx-auto h-full flex items-center">
+        {/* Initial landing view with example prompts */}
         {!hasInteracted && messages.length === 0 ? (
           <div className="text-center space-y-8 w-full">
+            {/* Hero section with title and input */}
             <div className="space-y-4">
               <h2 className="text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                 今天你想學什麼？
@@ -121,6 +133,7 @@ export default function LandingPageChatBot() {
               </p>
             </div>
 
+            {/* Message input form */}
             <form onSubmit={onSubmit} className="max-w-3xl mx-auto">
               <div className="relative flex items-center">
                 <input
@@ -158,6 +171,7 @@ export default function LandingPageChatBot() {
               </div>
             </form>
 
+            {/* Example prompts grid */}
             <div className="mt-12">
               <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
                 {EXAMPLE_PROMPTS.map((prompt, index) => (
@@ -195,17 +209,21 @@ export default function LandingPageChatBot() {
             </div>
           </div>
         ) : (
+          /* Chat interface after interaction */
           <div className="bg-background-primary/50 backdrop-blur-sm rounded-2xl shadow-lg border border-border/50 overflow-hidden w-full h-[700px] flex flex-col">
+            {/* Chat header */}
             <div className="p-6 border-b border-border/50 bg-background-secondary/30">
               <h2 className="text-xl font-semibold text-text-primary">
                 PlayGO 導覽員
               </h2>
             </div>
 
+            {/* Messages container with auto-scroll */}
             <div
               ref={chatContainerRef}
               className="flex-1 overflow-y-auto p-6 space-y-6"
             >
+              {/* Message bubbles with different styles for user/assistant */}
               {messages.map((message, index) => (
                 <div
                   key={index}
@@ -227,6 +245,7 @@ export default function LandingPageChatBot() {
               ))}
             </div>
 
+            {/* Input form at bottom of chat */}
             <div className="p-6 border-t border-border/50 bg-background-secondary/30">
               <form onSubmit={onSubmit}>
                 <div className="relative flex items-center">

app/embed/chat/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import dynamic from 'next/dynamic';
+import { useEffect } from 'react';
+
+// Dynamically import the chat bot component with no SSR
+const EmbeddableChatBot = dynamic(
+  () => import('@/app/components/embeddable-chat-bot'),
+  { ssr: false }
+);
+
+export default function EmbedChatPage() {
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const config = {
+      apiUrl: params.get('apiUrl') || undefined,
+      theme: params.get('theme') as 'light' | 'dark' || 'light',
+      primaryColor: params.get('primaryColor') || '#FF6B6B',
+      placeholder: params.get('placeholder') || undefined,
+      buttonText: params.get('buttonText') || undefined,
+    };
+
+    if (window.parent) {
+      window.parent.postMessage({ type: 'CHAT_READY', config }, '*');
+    }
+  }, []);
+
+  return <EmbeddableChatBot />;
+}

app/embed/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "PlayGo AI Chat",
+  description: "Embedded AI Chat Interface",
+};
+
+export default function EmbedLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body style={{
+        margin: 0,
+        padding: 0,
+        background: 'transparent',
+        height: '100%',
+        width: '100%'
+      }}>
+        {children}
+      </body>
+    </html>
+  );
+}

app/layout.tsx

@@ -3,6 +3,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from "@/app/components/theme-provider";
 import { TopNav } from "./components/top-nav";
+import { headers } from 'next/headers';
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -16,11 +17,19 @@ export const metadata: Metadata = {
     "Transform education with AI-powered interactive learning experiences",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const headersList = await headers();
+  const pathname = headersList.get("x-pathname") || "";
+  const isEmbed = pathname.startsWith("/embed");
+
+  if (isEmbed) {
+    return children;
+  }
+
   return (
     <html
       lang="en"
@@ -35,7 +44,9 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <TopNav />
-          <main className="pt-14">{children}</main>
+          <main className="pt-14">
+            {children}
+          </main>
         </ThemeProvider>
       </body>
     </html>

app/types/chatbot.ts

@@ -1,10 +0,0 @@
-export interface ChatBot {
-  id: string;
-  title: string;
-  description: string;
-  subject: string;
-  icon: string;
-  category: string;
-  popular?: boolean;
-  trending?: boolean;
-}

middleware.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const response = NextResponse.next();
+  
+  // Add pathname to headers for layout detection
+  response.headers.set('x-pathname', request.nextUrl.pathname);
+
+  // CORS handling
+  const origin = request.headers.get('origin');
+  
+  if (process.env.NODE_ENV === 'development') {
+    response.headers.set('Access-Control-Allow-Origin', '*');
+    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+    return response;
+  }
+
+  const allowedOrigins = process.env.ALLOWED_ORIGINS?.split(',') || [];
+  
+  if (origin && allowedOrigins.includes(origin)) {
+    response.headers.set('Access-Control-Allow-Origin', origin);
+    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+  }
+
+  return response;
+}
+
+export const config = {
+  matcher: [
+    '/api/:path*',
+    '/((?!_next/static|_next/image|favicon.ico).*)',
+  ],
+}; 

public/embed.js

@@ -0,0 +1,86 @@
+(function() {
+  console.log('Initializing PlayGo Chat Widget');
+
+  function createChatWidget(config) {
+    console.log('Creating chat widget with config:', config);
+
+    // Create container for positioning
+    const container = document.createElement('div');
+    Object.assign(container.style, {
+      position: 'fixed',
+      bottom: '0',
+      right: '0',
+      zIndex: '9999',
+      padding: '20px',
+      transition: 'all 0.3s ease-in-out',
+      background: 'transparent',
+      width: '250px',
+      height: '120px',
+      display: 'flex',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end'
+    });
+
+    // Create iframe
+    const iframe = document.createElement('iframe');
+    Object.assign(iframe.style, {
+      border: 'none',
+      background: 'transparent',
+      width: '180px',
+      height: '60px',
+      transition: 'all 0.3s ease-in-out',
+      transform: 'scale(1)',
+      transformOrigin: 'bottom right'
+    });
+
+    // Set source with config parameters
+    const queryParams = new URLSearchParams(config).toString();
+    const chatUrl = `${window.location.origin}/embed/chat?${queryParams}`;
+    iframe.src = chatUrl;
+
+    // Handle messages from the iframe
+    window.addEventListener('message', function(event) {
+      if (event.data.type === 'chatOpen') {
+        container.style.padding = '20px';
+        container.style.width = '380px';
+        container.style.height = '600px';
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+      } else if (event.data.type === 'chatClose') {
+        container.style.padding = '20px';
+        container.style.width = '250px';
+        container.style.height = '120px';
+        iframe.style.width = '180px';
+        iframe.style.height = '60px';
+      }
+    });
+
+    container.appendChild(iframe);
+    return container;
+  }
+
+  // Initialize the widget
+  window.playgo = function(action, config = {}) {
+    if (action === 'init') {
+      try {
+        const existingWidget = document.getElementById('playgo-chat-widget');
+        if (existingWidget) {
+          existingWidget.remove();
+        }
+
+        const widget = createChatWidget(config);
+        widget.id = 'playgo-chat-widget';
+        document.body.appendChild(widget);
+
+        console.log('PlayGo chat initialized successfully');
+      } catch (error) {
+        console.error('Error initializing PlayGo chat:', error);
+      }
+    }
+  };
+
+  // Process any queued commands
+  if (window.PlayGoChatWidget?.q) {
+    window.PlayGoChatWidget.q.forEach(args => window.playgo(...args));
+  }
+})(); 

public/test-embed.html

@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Embedded Chat Bot</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            min-height: 100vh;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            background-color: #fff;
+            color: #333;
+        }
+
+        .header {
+            background: #f3f4f6;
+            padding: 1rem 2rem;
+            border-bottom: 1px solid #e5e7eb;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        .content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        .section {
+            margin-bottom: 5rem;
+        }
+
+        .section h2 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            color: #111827;
+        }
+
+        .card-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .card {
+            background: #fff;
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            border: 1px solid #e5e7eb;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .card h3 {
+            color: #111827;
+            margin-bottom: 0.5rem;
+        }
+
+        .card p {
+            color: #4b5563;
+        }
+
+        .footer {
+            background: #f3f4f6;
+            padding: 2rem;
+            text-align: center;
+            border-top: 1px solid #e5e7eb;
+            color: #6b7280;
+            margin-top: 5rem;
+        }
+
+        .spacer {
+            height: 50vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.05), transparent);
+            margin: 3rem 0;
+            font-size: 1.2rem;
+            color: #666;
+            font-style: italic;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: #1a1a1a;
+                color: #e5e5e5;
+            }
+
+            .header, .footer {
+                background: #2d2d2d;
+                border-color: #404040;
+            }
+
+            .card {
+                background: #2d2d2d;
+                border-color: #404040;
+            }
+
+            .card h3 {
+                color: #e5e5e5;
+            }
+
+            .card p {
+                color: #a3a3a3;
+            }
+
+            .spacer {
+                background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.05), transparent);
+                color: #999;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>Test Page for Embedded Chat Bot</h1>
+    </header>
+
+    <main class="content">
+        <section class="section">
+            <h2>About This Test Page</h2>
+            <p>This is a full-page test environment for the PlayGO AI Chat Bot. The chat bot appears as a floating button at the bottom right corner of the page.</p>
+        </section>
+
+        <div class="spacer">
+            Scroll down to see more content...
+        </div>
+
+        <section class="section">
+            <h2>Sample Content</h2>
+            <div class="card-grid">
+                <div class="card">
+                    <h3>Card 1</h3>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+                <div class="card">
+                    <h3>Card 2</h3>
+                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+                <div class="card">
+                    <h3>Card 3</h3>
+                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+                </div>
+            </div>
+        </section>
+
+        <div class="spacer">
+            Keep scrolling to test the chat bot's fixed position...
+        </div>
+
+        <section class="section">
+            <h2>More Content</h2>
+            <div class="card-grid">
+                <div class="card">
+                    <h3>Card 4</h3>
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+                <div class="card">
+                    <h3>Card 5</h3>
+                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+                </div>
+                <div class="card">
+                    <h3>Card 6</h3>
+                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.</p>
+                </div>
+            </div>
+        </section>
+
+        <div class="spacer">
+            The chat bot should remain visible at all times...
+        </div>
+
+        <section class="section">
+            <h2>Final Section</h2>
+            <div class="card-grid">
+                <div class="card">
+                    <h3>Card 7</h3>
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum.</p>
+                </div>
+                <div class="card">
+                    <h3>Card 8</h3>
+                    <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod.</p>
+                </div>
+                <div class="card">
+                    <h3>Card 9</h3>
+                    <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>Test Page Footer</p>
+    </footer>
+
+    <!-- Embed script -->
+    <script>
+        // Debug logging
+        console.log('Setting up PlayGo Chat Widget');
+
+        // Create queue before loading script
+        window.PlayGoChatWidget = {
+            q: [],
+            ready: false
+        };
+
+        // Initialize configuration
+        const config = {
+            buttonText: '需要協助嗎？',
+            theme: 'system',
+            primaryColor: '#FF6B6B',
+            placeholder: 'Type your message...'
+        };
+
+        // Add custom CSS for chat widget spacing
+        const style = document.createElement('style');
+        style.textContent = `
+            #playgo-chat-widget {
+                padding: 16px !important;
+                border-radius: 16px !important;
+                background: transparent !important;
+            }
+
+            #playgo-chat-widget iframe {
+                border-radius: 16px !important;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
+                transition: height 0.5s ease-in-out, box-shadow 0.3s ease-in-out !important;
+            }
+
+            #playgo-chat-widget iframe:hover {
+                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                #playgo-chat-widget iframe {
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+                }
+
+                #playgo-chat-widget iframe:hover {
+                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+
+        // Add to queue
+        window.PlayGoChatWidget.q.push(['init', config]);
+
+        // Load script
+        (function() {
+            console.log('Loading embed script');
+            const script = document.createElement('script');
+            script.src = '/api/embed';
+            script.async = true;
+            script.onload = function() {
+                console.log('Embed script loaded');
+            };
+            script.onerror = function(error) {
+                console.error('Error loading embed script:', error);
+            };
+            document.body.appendChild(script);
+        })();
+    </script>
+</body>
+</html>

test-server.js

@@ -0,0 +1,30 @@
+const express = require('express');
+const app = express();
+const port = 3001;
+
+app.get('/', (req, res) => {
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Cross-Origin Test</title>
+      </head>
+      <body>
+        <h1>Cross-Origin Test Page</h1>
+        <div id="playgo-chat-container"></div>
+        <script src="http://localhost:3000/api/embed"></script>
+        <script>
+          playgo('init', {
+            containerId: 'playgo-chat-container',
+            width: '400px',
+            height: '600px'
+          });
+        </script>
+      </body>
+    </html>
+  `);
+});
+
+app.listen(port, () => {
+  console.log(`Test server running at http://localhost:${port}`);
+});