# AI 튜터 챗봇

LMS에 쉽게 연동할 수 있는 AI 튜터 챗봇 위젯입니다.

## 🚀 빠른 시작

### 1. 의존성 설치
```bash
npm install
cd server && npm install
```

### 2. 빌드
```bash
npm run build  # 메인 파일 + 테마 파일 빌드
```

### 3. 서버 실행 (개발용)
```bash
cd server
npm start
```

### 4. 데모 확인
- **개발 모드**: `demo.html` - 소스 파일 직접 사용
- **빌드 테스트**: `demo-dist.html` - 빌드된 파일 사용

## 📦 빌드 시스템

### 빌드 명령어
```bash
npm run build        # 프로덕션 빌드 (압축)
npm run clean        # dist 폴더 정리
npm run dev          # 개발 모드 (감시)
npm run dev:server   # 개발 서버 실행
```

### 빌드 결과물
```
dist/
├── ai-tutor.esm.js     # ES6 모듈 버전 (37.1KB, 압축됨)
├── ai-tutor.min.js     # 일반 자바스크립트 버전 (37.6KB, 압축됨)
├── ai-tutor.umd.js     # UMD 래퍼 (한 번만 생성, 빌드 시 보존)
└── themes/
    ├── default.js      # 기본 테마 (자동 생성)
    └── dark.js         # 다크 테마 (자동 생성)
```

### 환경별 테마 로딩
- **개발 환경**: `src/css/`, `src/templates/`에서 개별 파일 로드
- **프로덕션 환경**: `dist/themes/{theme}.js`에서 번들된 테마 로드
- **자동 감지**: 도메인과 프로토콜 기반으로 환경 자동 판별

## 📦 설치 및 사용법

### 1. NPM 설치

```bash
npm install ai-tutor
```

### 2. CDN 사용

#### JSDelivr (권장)
```html
<!-- 일반 자바스크립트 버전 -->
<script src="https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.min.js"></script>

<!-- ES6 모듈 버전 -->
<script type="module">
  import { AITutor } from 'https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.esm.js';
</script>
```

#### UNPKG
```html
<!-- 일반 자바스크립트 버전 -->
<script src="https://unpkg.com/ai-tutor/dist/ai-tutor.min.js"></script>

<!-- ES6 모듈 버전 -->
<script type="module">
  import { AITutor } from 'https://unpkg.com/ai-tutor/dist/ai-tutor.esm.js';
</script>
```

### 3. 사용법

#### 일반 자바스크립트 방식

```html
<!-- 1. 스크립트 추가 -->
<script src="https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.min.js"></script>

<!-- 2. 초기화 -->
<script>
const tutor = new AITutor({
    welcomeMessage: '안녕하세요! AI 튜터입니다. 궁금한 점이 있으면 언제든 물어보세요! 😊',
    environment: 'development',  // 개발: http://127.0.0.1:8787, 운영: https://aitutor.apiserver.kr
    width: 400,
    height: 600,
    theme: 'dark',
    suggestedQuestions: [
        '강의 내용을 요약해 주세요',
        '예제와 함께 알려주세요',
        '관련된 추가 정보가 있나요?'
    ]
});
</script>
```

#### ES6 모듈 방식

```javascript
// NPM으로 설치한 경우
import { AITutor } from 'ai-tutor';

// 또는 CDN 사용
import { AITutor } from 'https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.esm.js';

const tutor = new AITutor({
    welcomeMessage: '안녕하세요! AI 튜터입니다.',
    environment: 'production',
    theme: 'default'
});
```

#### UMD 방식 (레거시 지원)

```html
<script src="https://cdn.jsdelivr.net/npm/ai-tutor/dist/ai-tutor.umd.js"></script>
<script>
// UMD 래퍼를 통한 동적 로딩
const tutor = new AITutor({
    welcomeMessage: '안녕하세요!'
});
</script>
```

### 4. 설정 옵션

```javascript
const tutor = new AITutor({
    // API 설정
    apiEndpoint: '/v1/chat',            // 채팅 API 엔드포인트 (선택사항)
    quizApiEndpoint: '/v1/quiz',        // 퀴즈 API 엔드포인트 (선택사항)
    apiKey: 'your-api-key',             // API 키 (선택사항)
    environment: 'production',          // 'development' 또는 'production'

    // UI 설정
    welcomeMessage: '안녕하세요!',       // 환영 메시지
    theme: 'default',                   // 테마 ('default' 또는 'dark')
    width: 350,                         // 창 너비 (픽셀)
    height: 500,                        // 창 높이 (픽셀)
    mobileFullscreen: true,             // 모바일에서 전체화면 사용

    // 추천 질문
    suggestedQuestions: [               // 초기 추천 질문 목록
        '강의 내용을 요약해 주세요',
        '예제와 함께 설명해 주세요'
    ]
});
```

#### 환경별 API 엔드포인트
- **development**: `http://127.0.0.1:8787`
- **production**: `https://aitutor.apiserver.kr`

### 5. 제어 함수

```javascript
// 챗봇 열기
tutor.show();

// 챗봇 닫기
tutor.hide();

// 챗봇 토글
tutor.toggle();

// 챗봇 제거
tutor.destroy();

// API 엔드포인트 변경
tutor.setApiEndpoint('https://new-api.com/v1/chat');

// API 키 설정
tutor.setApiKey('new-api-key');
```

## 🛠 API 서버 연동

챗봇은 다음과 같은 형식의 API를 기대합니다:

### 요청 (POST /api/chat)
```json
{
    "message": "사용자 메시지",
    "history": [
        {
            "content": "이전 메시지",
            "sender": "user",
            "timestamp": "2023-01-01T00:00:00.000Z"
        }
    ]
}
```

### 응답
```json
{
    "response": "AI 응답 메시지",
    "timestamp": "2023-01-01T00:00:00.000Z"
}
```

## 🎨 커스터마이징

### CSS 변수로 테마 커스터마이징

```css
:root {
    --ai-tutor-primary-color: #667eea;
    --ai-tutor-secondary-color: #764ba2;
    --ai-tutor-text-color: #333;
    --ai-tutor-bg-color: #fff;
    --ai-tutor-border-radius: 16px;
}
```

### 위치 커스터마이징

```css
.ai-tutor-widget {
    bottom: 20px;
    right: 20px;
    /* 또는 */
    bottom: 20px;
    left: 20px;
}
```

## 📱 반응형 지원

- 데스크톱: 350px × 500px 고정 크기
- 모바일: 전체 화면 대응

## 🔧 개발 환경

### 개발 모드
```bash
npm run dev
```

### 프로덕션 빌드
```bash
npm run build
```

### 서버 개발 모드
```bash
cd server
npm run dev
```

## 📋 요구사항

- Node.js 14 이상
- 모던 브라우저 (ES6+ 지원)

## 🤝 기여하기

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

## 📄 라이선스

MIT License

## 🔗 링크

- [데모 사이트](http://localhost:3000)
- [API 문서](http://localhost:3000/api)
- [GitHub Repository](#)