https://e-ve.event-form.jp/chatbot/js?isRouteUserTop=0&isContractUser=0

1let isRouteUserTop = false;
2// CSSとアイコンのリンクを追加する関数
3function addStylesheet(href) {
4    let link = document.createElement('link');
5    link.href = href;
6    link.rel = 'stylesheet';
7    document.head.appendChild(link);
8}
9
10// トグルボタンを作成し、追加する関数
11function createToggleButton() {
12    const toggleBtn = document.createElement('div');
13    toggleBtn.id = 'chatbot-toggle_button';
14    // 右寄せ（ユーザーTOPページのみ）
15    if (isRouteUserTop) {
16        toggleBtn.style.right = '30px';
17        toggleBtn.style.left = 'auto';
18    } else {
19        toggleBtn.style.left = '30px';
20        toggleBtn.style.right = 'auto';
21    }
22    toggleBtn.style.bottom = '30px';
23    const anchor = document.createElement('a');
24    anchor.id = 'chat-button';
25    anchor.href = '#';
26    anchor.addEventListener('click', event => {
27        event.preventDefault();
28        toggleChatbox();
29    });
30    const img = document.createElement('img');
31    // デフォルトのAI画像
32    // img.src = 'https://firebasestorage.googleapis.com/v0/b/mabo-f1cc7.appspot.com/o/chaticon.png?alt=media&token=1777070f-a83c-403d-8c83-f387f68ecd52';
33    // イーベ！様AI画像
34    img.src = 'https://e-ve.event-form.jp/img/common/e-ve_ai.png';
35    // 画像サイズ
36    img.width = '120';
37    // img.height = '160';
38    // img.style.maxWidth = '30%';
39    // img.width = '200';
40    // 追加のスタイル（透明性に影響しないか確認）
41    // img.style.display = 'block'; // 必要に応じて設定
42    // img.style.backgroundColor = 'transparent'; // 背景を透明に設定（必要に応じ
43
44    anchor.appendChild(img);
45    toggleBtn.appendChild(anchor);
46    document.body.appendChild(toggleBtn);
47}
48
49// チャットボックスのヘッダーを作成する関数
50function createChatboxHeader() {
51    const header = document.createElement('div');
52    header.id = 'chatbot-header';
53    header.style.background = '#4169e1';
54    const logo = document.createElement('div');
55    logo.id = 'chatbot-logo';
56    logo.innerText = 'イーベ！スタッフ';
57    const closeIcon = document.createElement('i');
58    closeIcon.id = 'chatbot-close-icon';
59    closeIcon.className = 'material-icons material-symbols-outlined waves-light';
60    closeIcon.innerText = 'close';
61    closeIcon.addEventListener('click', event => {
62        event.preventDefault();
63        toggleChatbox();
64    });
65    header.appendChild(logo);
66    header.appendChild(closeIcon);
67    return header;
68}
69
70// チャットボックスを作成し、追加する関数
71function createChatbox() {
72    const chatbox = document.createElement('div');
73    chatbox.id = 'chatbot';
74    chatbox.style.display = 'none';
75
76    const header = createChatboxHeader();
77    const body = document.createElement('div');
78    body.id = 'chatbot-body';
79    const iframe = document.createElement('iframe');
80    iframe.id = 'inline-frame';
81    iframe.style.width = '100%';
82    iframe.style.height = '100%';
83    iframe.dataSrc = 'https://miibo.jp/chat/4d20c13f-61bf-4327-a6ff-24b7ffc108001938cf583183e4?name=%E3%82%A4%E3%83%BC%E3%83%99%EF%BC%81%E5%A4%AA%E9%83%8E%E5%90%9B';
84    iframe.scrolling = 'no';
85    iframe.frameBorder = 'no';
86    body.appendChild(iframe);
87    chatbox.appendChild(header);
88    chatbox.appendChild(body);
89    document.body.appendChild(chatbox);
90}
91
92// チャットボックスの表示/非表示を切り替える関数
93function toggleChatbox(utterance, ...states) {
94    var chatbox = document.getElementById('chatbot');
95    var iframe = document.getElementById('inline-frame');
96
97    // ここでイベントオブジェクトではなく、文字列または未定義の値が渡されることを確認します。
98    if (typeof utterance !== 'string') {
99        utterance = null;
100    }
101
102    if (chatbox.style.display === 'none' || utterance) {
103        chatbox.style.display = 'block';
104        // 右寄せ（ユーザーTOPページのみ）
105        if (isRouteUserTop) {
106            chatbox.style.right = '10px';
107            chatbox.style.left = 'auto';
108        } else {
109            chatbox.style.left = '10px';
110            chatbox.style.right = 'auto';
111        }
112        var src = 'https://miibo.jp/chat/4d20c13f-61bf-4327-a6ff-24b7ffc108001938cf583183e4?name=%E3%82%A4%E3%83%BC%E3%83%99%EF%BC%81%E5%A4%AA%E9%83%8E%E5%90%9B';
113        // 可変引数からクエリパラメータを生成

114        states.forEach(state => {
115            if (state.key && state.value) {
116                src += src.includes('?') ? '&' : '?';
117                src +=  encodeURIComponent(state.key)+'='+encodeURIComponent(state.value);
118            }
119        });
120
121        // 以下の条件を追加して、再読み込みの必要性をチェック
122        if (!iframeLoaded || (utterance && lastUtterance !== utterance)) {
123            if (utterance) {
124                src += src.includes('?') ? '&' : '?';
125                src += "utterance=" + encodeURIComponent(utterance);
126            }
127            iframe.src = src;
128            iframeLoaded = true;
129            lastUtterance = utterance;
130        }
131    } else {
132        chatbox.style.display = 'none';
133    }
134}
135
136// イベントリスナーを設定する関数
137function setupEventListeners() {
138    document.querySelectorAll('.chatButton').forEach(button => {
139        button.addEventListener('click', event => {
140            event.preventDefault();
141            const utterance = button.getAttribute('data-utterance');
142            const statesData = button.getAttribute('data-states');
143            let states = [];
144            try {
145                // JSON 形式の文字列をオブジェクトに変換
146                const statesObj = JSON.parse(statesData);
147                // オブジェクトから key-value ペアの配列を生成
148                states = Object.keys(statesObj).map(key => ({key, value: statesObj[key]}));
149            } catch (e) {
150                console.error("Error parsing states data", e);
151            }
152
153            toggleChatbox(utterance, ...states);
154        });
155    });
156}
157
158// メイン実行部
159addStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
160addStylesheet('https://miibo.jp/chat3.css');
161createToggleButton();
162createChatbox();
163setupEventListeners();
164
165var iframeLoaded = false; // iframeがロードされたかどうかを追跡するフラグ
166var lastUtterance = ""; // 最後に発話した内容を追跡するフラグ