// 会話履歴を保持する配列（OpenAI API用の形式）
  // 例: { role: "user" | "assistant", content: "メッセージ内容" }
  const conversation = [];

  // カスタムAPIのエンドポイントURL（環境に合わせて変更してください）
  const API_URL = 'https://{アカウント識別名}-{サイト識別名}.spiral-site.com/_program/{custom_api_name}';

  // チャット履歴にメッセージを追加する関数
  function addMessage(role, text) {
    const chatHistory = document.getElementById('chat-history');
    const messageDiv = document.createElement('div');
    messageDiv.className = 'message ' + role;
    messageDiv.textContent = text;
    chatHistory.appendChild(messageDiv);
    // 最新メッセージが見えるようにスクロール
    chatHistory.scrollTop = chatHistory.scrollHeight;
  }

  // 送信ボタン押下時または Enter キー押下時の処理
  function sendMessage() {
    const inputField = document.getElementById('chat-input');
    const userMessage = inputField.value.trim();
    if (!userMessage) return;
    // ユーザメッセージを履歴に追加
    conversation.push({ role: 'user', content: userMessage });
    addMessage('user', userMessage);
    inputField.value = '';

    // カスタムAPIへ POST リクエストを送信
    fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
        // ※必要に応じて認証ヘッダーなどを追加
      },
      body: JSON.stringify({ messages: conversation })
    })
    .then(response => response.json())
    .then(data => {
      if (data.status === 'success') {
        const assistantMessage = data.data.assistant;
        // 会話履歴に Assistant の返答を追加
        conversation.push({ role: 'assistant', content: assistantMessage });
        addMessage('assistant', assistantMessage);
      } else {
        // エラー表示
        addMessage('system', 'エラー: ' + data.errorMessage);
      }
    })
    .catch(error => {
      addMessage('system', '通信エラー: ' + error);
    });
  }

document.addEventListener('DOMContentLoaded', function() {
  // 送信ボタンのクリックイベント登録
  document.getElementById('send-btn').addEventListener('click', sendMessage);

  // Enter キーでも送信できるように設定
  document.getElementById('chat-input').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });
});
                

<div id="chat-container">
  <div id="chat-history">
    <div id="chat-header">サポートデスク</div>
    <!-- ここにチャットメッセージが追加されます -->
  </div>
  <div id="chat-input-container">
    <input type="text" id="chat-input" placeholder="メッセージを入力…" />
    <button id="send-btn">送信</button>
  </div>
</div>
                

/* チャットウィンドウ全体 */
#chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-height: 500px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
}

/* チャット履歴部分（初期高さを設定） */
#chat-history {
  padding: 10px;
  overflow-y: auto;
  background-color: #fff;
  height: 350px;  /* 初期高さを指定 */
  border-bottom: 1px solid #ddd;
}

/* 見出し用スタイル */
#chat-header {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

/* 入力エリア */
#chat-input-container {
  border-top: 1px solid #ddd;
  display: flex;
}
#chat-input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}
#send-btn {
  padding: 10px 15px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

/* メッセージバブル */
.message {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 15px;
  max-width: 80%;
  clear: both;
}
.message.user {
  background-color: #dcf8c6;
  float: right;
}
.message.assistant {
  background-color: #ececec;
  float: left;
}
.message.system {
  background-color: #ffe6e6;
  text-align: center;
  margin: 0 auto;
}