SmartChat Widget for Angular 12

專為 Angular 12 環境優化的智能客服嵌入套件 - 讓您的 Angular 12 應用 5 分鐘內擁有專業 AI 客服功能

🎯 Angular 12 專用特色

• ✅ 完全兼容 Angular 12.x 版本
• ✅ TypeScript 4.3 支援
• ✅ IE 11 瀏覽器支援
• ✅ SystemJS 和 RequireJS 兼容
• ✅ SSR (Server-Side Rendering) 安全
• ✅ AOT (Ahead-of-Time) 編譯優化

📦 安裝

NPM 安裝

npm install smartchat-widget-ng12

Yarn 安裝

yarn add smartchat-widget-ng12

🚀 快速開始

1. 導入模組 (app.module.ts)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SmartChatWidgetModule } from 'smartchat-widget-ng12';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SmartChatWidgetModule.forRoot({
      defaultConfig: {
        apiEndpoint: 'https://your-api.com/v1',
        theme: {
          primaryColor: '#007bff'
        }
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在組件中使用服務

import { Component, OnInit } from '@angular/core';
import { SmartChatWidgetService, SmartChatConfig } from 'smartchat-widget-ng12';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  constructor(private smartChat: SmartChatWidgetService) {}

  async ngOnInit() {
    const config: SmartChatConfig = {
      clientId: 'your-client-id',
      apiEndpoint: 'https://api.smartchat.com/v1',
      theme: {
        primaryColor: '#007bff',
        position: 'bottom-right'
      },
      ui: {
        showHeader: true,
        showAvatar: true,
        enableSound: true
      }
    };

    try {
      await this.smartChat.initialize(config);
      console.log('SmartChat 初始化成功');
    } catch (error) {
      console.error('初始化失敗:', error);
    }
  }

  openChat() {
    this.smartChat.open();
  }

  closeChat() {
    this.smartChat.close();
  }
}

3. 使用預建組件 (可選)

<!-- app.component.html -->
<smartchat-widget 
  [config]="chatConfig"
  [showControls]="true"
  [showStatus]="true"
  [autoInit]="true">
</smartchat-widget>

// app.component.ts
export class AppComponent {
  chatConfig: SmartChatConfig = {
    clientId: 'your-client-id',
    theme: {
      primaryColor: '#28a745',
      position: 'bottom-right'
    }
  };
}

🔧 Angular 12 專用配置

SystemJS 配置 (如果使用)

// systemjs.config.js
System.config({
  map: {
    'smartchat-widget-ng12': 'node_modules/smartchat-widget-ng12/dist/smartchat-widget.umd.js'
  }
});

Webpack 配置優化

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      'smartchat-widget-ng12': path.resolve('./node_modules/smartchat-widget-ng12/dist/smartchat-widget.esm.js')
    }
  }
};

IE 11 Polyfills

如需支援 IE 11，請在 polyfills.ts 中添加：

// polyfills.ts
import 'core-js/es/promise';
import 'core-js/es/array';
import 'core-js/es/object';

📱 API 參考

SmartChatWidgetService

方法

| 方法 | 描述 | 參數 | 返回值 | |------|------|------|--------| | initialize(config) | 初始化 Widget | SmartChatConfig | Promise<void> | | open() | 開啟聊天窗口 | - | void | | close() | 關閉聊天窗口 | - | void | | sendMessage(message) | 發送訊息 | string | void | | clearChat() | 清空聊天記錄 | - | void | | getVersion() | 獲取版本號 | - | string | | destroy() | 銷毀 Widget | - | void | | isInitialized() | 檢查初始化狀態 | - | boolean |

配置接口

interface SmartChatConfig {
  clientId: string;                    // 必填：客戶端 ID
  apiEndpoint?: string;                // API 端點
  theme?: {
    primaryColor?: string;             // 主題色彩
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    zIndex?: number;                   // 層級
  };
  ui?: {
    showHeader?: boolean;              // 顯示標題
    showAvatar?: boolean;              // 顯示頭像
    enableSound?: boolean;             // 啟用聲音
    enableTyping?: boolean;            // 顯示打字狀態
  };
  debug?: boolean;                     // 調試模式
}

🔄 從其他版本遷移

從 smartchat-widget 遷移

# 移除舊版本
npm uninstall smartchat-widget

# 安裝 Angular 12 版本
npm install smartchat-widget-ng12

更新導入語句：

// 舊版本
import { SmartChatWidget } from 'smartchat-widget';

// Angular 12 版本
import { SmartChatWidgetService } from 'smartchat-widget-ng12';

🛠️ 開發指南

本地開發

# 複製專案
git clone https://github.com/smartchat/widget-ng12.git

# 安裝依賴
npm install

# 構建 Angular 12 版本
node build-ng12.js

# 運行測試
npm test

構建命令

# 構建所有版本
npm run build

# 只構建 Angular 12 版本
node build-ng12.js

# 監聽模式
npm run build:watch

🆘 故障排除

常見問題

Q: 在 IE 11 中不工作？ A: 請確保已載入必要的 polyfills（參見上方 IE 11 Polyfills 章節）

Q: SystemJS 載入失敗？ A: 請使用 UMD 版本：dist/smartchat-widget.umd.js

Q: AOT 編譯錯誤？ A: 確保使用 forRoot() 方法導入模組

Q: TypeScript 編譯錯誤？ A: 請確認 TypeScript 版本為 ~4.3.0

版本兼容性

| Angular 版本 | TypeScript 版本 | 推薦套件版本 | |-------------|----------------|-------------| | 12.x | ~4.3.0 | smartchat-widget-ng12 | | 13+ | ~4.4+ | smartchat-widget |

📞 技術支援

• 🐛 回報問題
• 💬 技術討論
• 📧 技術支援: [email protected]
• 📚 完整文件

📄 授權

MIT License - 詳見 LICENSE 文件

SmartChat Team - 專為 Angular 12 打造 🚀