chat.hbs 3.78 KB
Newer Older
minseok.park's avatar
minseok.park committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
  <div class="chat-btn">
    <svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
      <path stroke-linecap="round" stroke-linejoin="round" d="M7.188 10a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0 1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353 6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639 1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409-.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875 7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
    </svg>
  </div>
  <div class="chat">
    <div class="chat-head">
      <i class="chat-logo"></i>
      <div class="chat-logo-title-contents">
        <span class="chat-logo-title">SWLab</span>
        <span class="chat-logo-title sub">Bankware Global</span>
      </div>
      <div id="expand-btn">
        <svg data-slot="icon" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="30" height="30">
          <path d="m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path>
        </svg>
      </div>
박민석's avatar
박민석 committed
18
      <div id="close-btn">
minseok.park's avatar
minseok.park committed
19 20
        <svg data-slot="icon" fill="none" stroke-width="1.5" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="30" height="30">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
박민석's avatar
박민석 committed
21 22
        </svg>
      </div>
minseok.park's avatar
minseok.park committed
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
      <div class="model">
        <div class="backdrop"></div>
        <button id="model-toggle">전체</button>
        <ul id="model-popover">
          <li>전체</li>
          <li>BXM</li>
          <li>BXCM</li>
          <li>BXCP</li>
          <li>BXI</li>
        </ul>
        <div class="tooltip">
          <svg class="w-[22px] h-[22px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="#7d7d7d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
          </svg>
          <span class="tooltip-text">제품 선택 시 더 정확한 매뉴얼 가이드를 제공해드립니다.</span>
        </div>
      </div>
    </div>
    <div class="chat-body"></div>
    <form class="chat-area">
      <textarea id="chat-input" placeholder="무엇을 도와드릴까요?"></textarea>
      <div class="chat-btn-area">
        <div id="send-btn" class="active">
          <svg data-slot="icon" fill="none" stroke-width="3" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path>
          </svg>
        </div>
        <div id="stop-btn">
          <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="18" height="18">
            <path clip-rule="evenodd" fill-rule="evenodd" d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"></path>
          </svg>
        </div>
      </div>
    </form>
  </div>