สร้าง Webapps Bot Chat สำหรับหน่วยงานของคุณ

bysemicon -
0

 



botchat.gs

/** ฟังก์ชั่นสำหรับรับข้อมูลแผนกจาก Google Sheets */
function getDepartments() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Department');
  const data = sheet.getDataRange().getValues();
  const departments = [];

  for (let i = 1; i < data.length; i++) {
    departments.push({
      department: data[i][0],
      phone: data[i][1]
    });
  }
  return departments;
}

/** ฟังก์ชั่นสำหรับรับข้อมูลคำถามของผู้ใช้จาก Google Sheets */
function getBotResponse(department, userMessage) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('BotData');
  const data = sheet.getDataRange().getValues();
  const lowerCaseUserMessage = userMessage.toLowerCase();
 
  let exactAnswer = null;
  const relatedQuestions = [];

  for (let i = 1; i < data.length; i++) {
    if (data[i][0] === department) {
      const question = data[i][1].toLowerCase();
      if (question === lowerCaseUserMessage) {
        exactAnswer = data[i][2];
        break;
      } else if (question.includes(lowerCaseUserMessage)) {
        relatedQuestions.push(data[i][1]);
      }
    }
  }

  return {
    exactAnswer: exactAnswer,
    relatedQuestions: relatedQuestions
  };
}

/** ฟังก์ชั่นสำหรับรับข้อมูลคำถามจาก Google Sheets จากการเลือกคำถามของผู้ใช้  */
function getResponseForSelectedQuestion(department, selectedQuestion) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('BotData');
  const data = sheet.getDataRange().getValues();

  for (let i = 1; i < data.length; i++) {
    if (data[i][0] === department && data[i][1] === selectedQuestion) {
      return data[i][2];
    }
  }

  return "ฉันไม่พบข้อมูลใดๆ ที่เกี่ยวข้องกับคำถามของคุณ";
}


index.html

<!DOCTYPE html>
<html>
<head>
<?!= include("botchat_css") ?>

</head>
<body>
  <div class="chat-popup" id="chatPopup" style="display:none;">
    <div class="chat-popup-header">
      <span class="header-title"> <img src="https://cdn-icons-png.flaticon.com/128/17115/17115944.png" alt="icon" class="icon"> ChatBot </span>
      <span class="btn-close btn-close-white" onclick="closeChat()"></span>
    </div>
    <div class="chat-popup-content" id="content">
      <div  id="chatContent">
        <p class="chat-welcom bot"><span><i class="fa-solid fa-robot"></i></span>&ensp; <span class="msg_bot">สวัสดีค่ะ <br>กรุณาเลือกหน่วยงานที่ต้องการติดต่อ</span>
</p>
        <div id="departmentButtons"></div>
      </div>
      <div id="chatRoom" style="display:none;">
        <div id="chatMessages"></div>
        <div class="sublist" id="questionList" style="display:none;">
          <div class="chat-welcom bot">
            <span><i class="fa-solid fa-robot"></i></span>&ensp;
            <span class="msg_bot">
              <ol id="questions"></ol>
              เลือกรายการที่ให้มา หรือ ป้อนคำถามใหม่
            </span>
          </div>
        </div>
      </div>
     
    </div>
    <div class="chat-popup-foot" id="footer" style="display:none;">
      <div class="input-group p-2">
        <input type="text" class="form-control"  id="userMessage" placeholder="Type a message..." />
        <button class="input-group-text btn btn-primary" onclick="searchQuestions()"> <i class="fa-regular fa-paper-plane"></i> </button>
      </div>
    </div>
  </div>

  <div id="chatbutton">
    <button class="btn-chat" onclick="openChat()"> <img src="https://cdn-icons-png.flaticon.com/128/17115/17115944.png" alt="icon" style="width:45px; height: 45px;">
</button>
  </div>

  <?!= include("botchat_js") ?>

</body>
</html>




botchat_css.html

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
  <style>
  .chat-popup {
    position: fixed;
    bottom: 50px;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
    max-width: 350px;
    height: 450px; /* ความสูงของ chat popup */
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column; /* จัดวางคอลัมน์ head, body, foot */
  }
  .chat-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #007bff;
    color: white;
    font-size: 1.5rem;
    padding: 5px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .header-title {
    flex-grow: 1;
  }
  .icon {
    width: 35px;
    height: 35px;
    margin-right: 5px;
    margin-lef: 5px;
    vertical-align: middle;
  }
  .chat-popup-content {
    padding: 10px;
    height: 350px;
    overflow-y: auto;
  }
  .chat-popup-content {
    padding: 10px;
    height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .chat-message{
    margin-bottom: 10px;
    display: inline-block;
    max-width: 95%;
    word-wrap: break-word;
  }
  .chat-welcom{
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    display: inline-block;
    word-wrap: break-word;
    width: 100%;
  }
  .chat-welcom.bot {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    float: left;
  }
  .chat-message span{
    display: flex-start;
  }
  .bot i {
    font-size: 1.25rem;
    color: #ef03de;
  }
  .user  i {
    font-size: 1.5rem;
    color: #007bff;
  }
  .sublist{
    display: flex;
    float: left;
  }
  .chat-message.bot {
    display: flex;
    float: left;
  }
  .chat-message.user {
    display: flex;
    float: right;
  }
  .msg_bot{
    background-color: #f1f1f1;
    padding: 8px 12px;
    border-radius: 10px;
    word-wrap: break-word;
  }
  .msg_user{
    background-color: #d1ecf1;
    padding: 8px 12px;
    border-radius: 10px;
    word-wrap: break-word;
  }
  .chat-popup-foot {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
  }
  .btn-close {
    cursor: pointer;
    font-size: 1.25rem;
  }
  .btn-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    border: none;
  }

</style>


botchat_js.html

<script>
  let currentDepartment = '';
  let currentPhone = '';
  let relatedQuestions = [];
 
  /** ฟังก์ชั่นเปิดป๊อบอัพห้องสนทนา */
  function openChat() {
    document.getElementById('chatbutton').style.display = 'none';
    document.getElementById('chatContent').style.display = 'block';
    document.getElementById('chatPopup').style.display = 'block';
    google.script.run.withSuccessHandler(displayDepartments).getDepartments();
  }

  /**  ฟังก์ชั่นปิดป๊อบอัพห้องสนทนา */
  function closeChat() {
    document.getElementById('chatbutton').style.display = 'block';
    document.getElementById('chatPopup').style.display = 'none';
    document.getElementById('chatMessages').innerHTML = '';
    document.getElementById('questionList').style.display = 'none';
    document.getElementById('footer').style.display = 'none';
  }
 
  /** ฟังก์ชั่นแสดงปุ่มเข้าห้องสนทนาของสำนักงาน */
  function displayDepartments(departments) {
    const container = document.getElementById('departmentButtons');
    container.innerHTML = '';
    departments.forEach(dept => {
      const button = document.createElement('button');
      button.className = 'btn btn-primary btn-block mb-2 w-100';
      button.textContent = dept.department;
      button.onclick = function() {
        enterChatRoom({department:dept.department,phone:dept.phone});
      };
      container.appendChild(button);
    });
  }

  /** ฟังก์ชั่นเข้าห้องสนทนาตามที่เลือก */
  function enterChatRoom(department) {
    currentDepartment = department.department;
    currentPhone  = department.phone;
    document.getElementById('chatContent').style.display = 'none';
    document.getElementById('chatRoom').style.display = 'block';
    document.getElementById('footer').style.display = 'block';
    document.getElementById('chatMessages').innerHTML += ` <p class="chat-welcom bot"><span><i class="fa-solid fa-robot"></i></span>&ensp; <span class="msg_bot">${department.department} ยินดีต้อนรับค่ะ</span></p>`;
  }
 
  /** ฟังก์ชั่นส่งคำถามและรับการตอบกลับจาก Apps Script */
  function searchQuestions() {
    const userMessage = document.getElementById('userMessage').value;
   
    if (!userMessage) return;

    const messagesContainer = document.getElementById('chatMessages');
    const userMsgElement = document.createElement('p');
    userMsgElement.className = 'chat-message user';
    userMsgElement.innerHTML = ` <span><i class="fa-regular fa-circle-user"></i></span>&ensp; <span class="msg_user"> ${userMessage}</span>`;
    messagesContainer.innerHTML += userMsgElement.outerHTML;

    scrollToBottom();
   
    // รับการตอบกลับจาก Apps Script
    google.script.run.withSuccessHandler(function(response) {
      const questionList = document.getElementById('questionList');
      const questionsContainer = document.getElementById('questions');
     
      questionsContainer.innerHTML = '';

      if (response.exactAnswer) { // แสดงคำตอบที่ตรงกับคำถาม
        const botMsgElement = document.createElement('p');
        botMsgElement.className = 'chat-message bot';
        botMsgElement.innerHTML = `<span><i class="fa-solid fa-robot"></i></span>&ensp; <span class="msg_bot"> ${response.exactAnswer}</span>`;
        messagesContainer.innerHTML += botMsgElement.outerHTML;
        questionList.style.display = 'none';
      } else if (response.relatedQuestions.length > 0) { // ไม่พบคำถามแต่มีคำถามที่เกี่ยวข้องบางส่วน
        const botMsgElement = document.createElement('p');
        botMsgElement.className = 'chat-message bot';
        botMsgElement.innerHTML = `<span><i class="fa-solid fa-robot"></i></span>&ensp; <span class="msg_bot"> ขออภัยค่ะ<br>ฉันหาคำตอบที่แน่ชัดไม่ได้ แต่มีข้อมูลบางส่วนที่เกี่ยวข้องกับคำถามของท่านดังนี้</span>`;
        messagesContainer.innerHTML += botMsgElement.outerHTML;
       
        // แสดงรายการคำถามที่เกี่ยวข้อง
        response.relatedQuestions.forEach(function(question) {
          const questionItem = document.createElement('li');
          questionItem.textContent = question;
          questionItem.style.cursor = 'pointer';
          questionItem.onclick = function() {
            selectQuestion(question);
          };
          questionsContainer.appendChild(questionItem);
        });
       
        questionList.style.display = 'block';
      } else { // ไม่พบคำถามและไม่มีคำถามที่เกี่ยวข้อง
        const botMsgElement = document.createElement('p');
        botMsgElement.className = 'chat-message bot';
        botMsgElement.innerHTML = `<span><i class="fa-solid fa-robot"></i></span>&ensp; <span class="msg_bot"> ขออภัยค่ะ <br>ฉันไม่พบข้อมูลใดๆ ที่เกี่ยวข้องกับคำถามของคุณ
            โปรดป้อนคำถามใหม่อีกครั้ง หรือติดต่อเจ้าหน้าที่ <br> โทร.&ensp;  ${currentPhone}</span>`;
        messagesContainer.innerHTML += botMsgElement.outerHTML;
        questionList.style.display = 'none';
      }

      scrollToBottom();

    }).getBotResponse(currentDepartment, userMessage);

    document.getElementById('userMessage').value = '';
  }

  /** ฟังก์ชั่นเลื่อนสกอร์บาร์ไว้ล่างสุด */
  function scrollToBottom() {
    const chatMessages = document.getElementById('content');
    chatMessages.scrollTop = chatMessages.scrollHeight-20;
  }
 
  /** ฟังก์ชั่นส่งคำถามและรับการตอบกลับจาก Apps Script เมื่อเลือกคำถามในรายการ */
  function selectQuestion(selectedQuestion) {
   
    // แสดงคำถามที่เลือกเป็นข้อความของผู้ใช้
    const messagesContainer = document.getElementById('chatMessages');
    const userMsgElement = document.createElement('p');
    userMsgElement.className = 'chat-message user';
    userMsgElement.innerHTML = `<span><i class="fa-regular fa-circle-user"></i></span>&ensp; <span class="msg_user"> ${selectedQuestion}</span>`;
    messagesContainer.innerHTML += userMsgElement.outerHTML;
    document.getElementById('questionList').style.display = 'none';
   
    // รับการตอบกลับจาก Apps Script
    google.script.run.withSuccessHandler(function(response) {
      const botMsgElement = document.createElement('p');
      botMsgElement.className = 'chat-message bot';
      botMsgElement.innerHTML = `<span><i class="fa-solid fa-robot"></i></span>&ensp;
<span class="msg_bot"> ${response}</span>`;
      messagesContainer.innerHTML += botMsgElement.outerHTML;
     
      scrollToBottom();

    }).getResponseForSelectedQuestion(currentDepartment, selectedQuestion);
  }

</script>



DOWNLOAD

Support my expenses to promote further development.

สนับสนุนค่ากาแฟ เพื่อเป็นกำลังใจในการพัฒนาต่อไป

คลิกสนับสนุนที่นี้




Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า