youhk
/
youhk_test_repository


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<head>
  <title>ChatUI</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../build/chatUI.css">
  <meta name="viewport" content="width=device-width">
  <style>
    html, body{
      margin:0;
      padding:0;
      border:0;
    }
    #chatbot{
      width:100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="chatbot">
  </div>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="../build/index-d3.min.js"></script>
  <script type="text/javascript">

    var chat = chatUI(d3.select('#chatbot'));

    //New bubble type
    chat.types.image = function(bubble, options, callback){
      bubble.append('div')
        .attr('class', 'cb-waiting')
        .html('<div class="circle"></div><div class="circle"></div><div class="circle"></div>');

      var image = new Image();
      image.src = options.value;
      image.addEventListener('load', function(){

        bubble.select(".cb-waiting").remove();
        options.value = '<img src="' + options.value + '" />';

        //This is a helper function for simply adding a paragrah with text/html
        chat.appendText(bubble, options, callback);

      }, false);

    };

    chat.addBubble({ type: 'text', value: 'Let me show you my Logo...', class: 'bot', delay: 1000 }, function () {
      chat.addBubble({ type: 'image', value: 'https://github.com/svift-org/ChatUI/blob/master/README/ChatUI-Logo.png?raw=true', class: 'bot', delay: 1000 });
    });

  </script>
</body>
</html>