基于React和Dialogflow构建的AI聊天机器人

ai chatbot with react.js and dialogflow api

h5, robot, ai, chat

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3026
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var data = {
  headerText: "hello hello ✨",
  pText: "I'm one (1) cute bot!",
  p2Text: "Made with React + Dialogflow",
  userMessages: [],
  botMessages: [],
  botGreeting: "oh hi! who are you?",
  botLoading: false
};

class App extends React.Component {
  constructor(props) {
    super(props);

this.state = data;
  }

updateUserMessages = newMessage => {
    if (!newMessage){
      return;  
    }
    
    var updatedMessages = this.state.userMessages;

var updatedBotMessages = this.state.botMessages;

this.setState({
      userMessages: updatedMessages.concat(newMessage),
      botLoading: true
    });

// Replace with your Dialogflow client token
    var request = new Request(
      "https://api.dialogflow.com/v1/query?v=20150910&contexts=shop&lang=en&query=" +
        newMessage +
        "&sessionId=12345",
      {
        headers: new Headers({
          Authorization: "Bearer bc13467053ad45feaaa6f23c8bfafa9d"
        })
      }
    );

fetch(request)
      .then(response => response.json())
      .then(json => {
        var botResponse = json.result.fulfillment.speech;

this.setState({
          botMessages: updatedBotMessages.concat(botResponse),
          botLoading: false
        });
      })
      .catch(error => {
        console.log("ERROR:", error);
         this.setState({
          botMessages: updatedBotMessages.concat('?'),
          botLoading: false
        });
      });
  };

scrollBubble = element => {
    if (element != null) {
      element.scrollIntoView(true);
    }
  };

showMessages = () => {
    var userMessages = this.state.userMessages;
    var botMessages = this.state.botMessages;

allMessages.push(<UserBubble message={userMessages[i]} />);
      allMessages.push(<BotBubble message={botMessages[i]} />);
    }

allMessages.unshift(
      <BotBubble
        message={this.state.botGreeting}
        thisRef={i === 0 ? this.scrollBubble : ""}
      />
    );

return <div className="msg-container">{allMessages}</div>;
  };

onInput = event => {
    if (event.key === "Enter") {
      var userInput = event.target.value;

this.updateUserMessages(userInput);
      event.target.value = "";
    }
    
    if (event.target.value!=""){
      event.target.parentElement.style.background = 'rgba(69,58,148,0.6)';
    }
    else{
      event.target.parentElement.style.background = 'rgba(255, 255, 255, 0.6)';
    }
  };

onClick = () => {
    var inp = document.getElementById("chat");
    var userInput = inp.value;

this.updateUserMessages(userInput);
    inp.value = "";
  };

render() {
    return (
      <div className="app-container">
        <Header
          headerText={this.state.headerText}
          pText={this.state.pText}
          p2Text={this.state.p2Text}
        />
        <div className="chat-container">
          <ChatHeader />
          {this.showMessages()}
          <UserInput onInput={this.onInput} onClick={this.onClick} />
        </div>
      </div>
    );
  }
}

class UserBubble extends React.Component {
  render() {
    return (
      <div className="user-message-container" ref={this.props.thisRef}>
        <div className="chat-bubble user">
          {this.props.message}
        </div>
      </div>
    );
  }
}

class BotBubble extends React.Component {
  render() {
    return (
      <div className="bot-message-container" ref={this.props.thisRef}>
        <div className="bot-avatar" />
        <div className="chat-bubble bot">
          {this.props.message}
        </div>
      </div>
    );
  }
}

var Header = props => {
  return (
    <div className="header">
      <div className="header-img" />
      <h1> {props.headerText} </h1>
      <h2> {props.pText} </h2>
      <p> {props.p2Text} </p>
    </div>
  );
};

var ChatHeader = props => {
  return (
    <div className="chat-header">
      <div className="dot" />
      <div className="dot" />
      <div className="dot" />
    </div>
  );
};

var UserInput = props => {
  return (
    <div className="input-container">
      <input
        id="chat"
        type="text"
        onKeyPress={props.onInput}
        placeholder="type something"
      />
      <button className="input-submit" onClick={props.onClick} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");
h1 {
    font-size: 7vh;
}
h2 {
    font-size: 4.5vh;
}
html,
body,
#app {
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
body {
    font-family: "Inconsolata", monospace;
    background: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
    color: white;
    background-attachment: fixed;
}
#app,
body,
.app-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.app-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 5vw 10vw 5vw 10vw;
}
.app-container .header {
    -webkit-animation: fade 1s ease 1.5s both;
    animation: fade 1s ease 1.5s both;
    z-index: 20;
    text-align: right;
    flex: 1 0 20vw;
    margin: 0 5vw 5vw 0;
    margin-top: auto;
    text-shadow: 1px 2px 0px rgba(244, 59, 71, 0.4), 3px 2px 0px rgba(244, 59, 71, 0.4), 2px 3px 0px rgba(244, 59, 71, 0.4);
    position: relative;
}
.app-container .header .header-img {
    position: absolute;
    top: -4rem;
    right: 10vw;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    background: url("https://zephyo.github.io/22Days/code/10/graphics/rikkakuma.gif") no-repeat;
    background-size: contain;
}
.app-container .chat-container {
    -webkit-animation: fade 0.5s ease 0.2s both;
    animation: fade 0.5s ease 0.2s both;
    -webkit-transform: perspective(100vh) rotateY(-7deg);
    transform: perspective(100vh) rotateY(-7deg);
    border-radius: 12px;
    box-shadow: 10px 5px 40px 10px rgba(244, 59, 71, 0.4);
    flex: 1 1 70vh;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}
.app-container .chat-container .chat-header {
    border: 4px solid #453a94;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    flex: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 4.5px;
    background: rgba(255, 255, 255, 0.5);
}
.app-container .chat-container .chat-header .dot {
    margin: 9px 13.5px 9px 0;
    width: 9px;
    height: 9px;
    background: #ff7871;
    border-radius: 50%;
    box-shadow: 3px 3px #db0035;
}
.app-container .chat-container .chat-header .dot:nth-child(1) {
    -webkit-animation: grow 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.3s both;
    animation: grow 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.3s both;
}
.app-container .chat-container .chat-header .dot:nth-child(2) {
    -webkit-animation: grow 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.5s both;
    animation: grow 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.5s both;
}
.app-container .chat-container .chat-header .dot:nth-child(3) {
    -webkit-animation: grow 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.7s both;
    animation: grow 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.7s both;
}
.app-container .chat-container .msg-container {
    background: rgba(255, 255, 255, 0.2);
    padding: 15px 15px 0 15px;
    flex: auto;
    border: 4px solid #453a94;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}
.app-container .chat-container .msg-container .user-message-container {
    align-self: flex-end;
}
.app-container .chat-container .msg-container .bot-message-container {
    flex: none;
    display: flex;
}
.app-container .chat-container .msg-container .bot-message-container .bot-avatar {
    background-image: url("https://zephyo.github.io/22Days/code/10/graphics/cutebearicon.gif");
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    margin-right: 1vw;
}
.app-container .chat-container .msg-container .bot-message-container:first-child .chat-bubble {
    -webkit-animation: pop 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.9s both;
    animation: pop 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.9s both;
}
.app-container .chat-container .msg-container .chat-bubble {
    display: inline-block;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 15px;
    max-width: 60%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    opacity: 0;
    -webkit-animation: pop 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) forwards;
    animation: pop 0.3s cubic-bezier(0.36, -0.04, 0.15, 1.64) forwards;
    will-change: transform;
}
.app-container .chat-container .msg-container .chat-bubble.user {
    float: right;
    border-top-right-radius: 0;
    background: #453a94;
    color: #e5b2ca;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.app-container .chat-container .msg-container .chat-bubble.bot {
    border-top-left-radius: 0;
    background: white;
    color: #7028e4;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}
.app-container .chat-container .input-container {
    -webkit-animation: up 0.35s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.5s both;
    animation: up 0.35s cubic-bezier(0.36, -0.04, 0.15, 1.64) 0.5s both;
    border: 4px solid #453a94;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    z-index: 30;
    flex: none;
    height: 14vh;
    max-height: 100px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: stretch;
    transition: background 0.3s ease;
}
.app-container .chat-container .input-container input {
    font-weight: 700;
    flex: auto;
    background: transparent;
    border: none;
    font-family: "Inconsolata";
    color: white;
    font-size: 1rem;
    padding: 1.5rem;
}
.app-container .chat-container .input-container *::-webkit-input-placeholder {
    color: #db0035;
}
.app-container .chat-container .input-container *:-ms-input-placeholder {
    color: #db0035;
}
.app-container .chat-container .input-container *::-ms-input-placeholder {
    color: #db0035;
}
.app-container .chat-container .input-container *::placeholder {
    color: #db0035;
}
.app-container .chat-container .input-container .input-submit {
    margin: 2vh;
    background: #ff7871;
    border: none;
    border-radius: 5px;
    box-shadow: 4px 4px #db0035;
    width: 10vh;
    position: relative;
}
.app-container .chat-container .input-container .input-submit:after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border: 5px solid white;
    border-left: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 0.5rem);
    left: calc(50% - 0.5rem);
}
.background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://zephyo.github.io/22Days/code/10/graphics/manu-franco-unsplash.jpg") no-repeat 0 0;
    -webkit-filter: blur(5vh);
    filter: blur(5vh);
    background-size: cover;
    background-position: center;
}
@-webkit-keyframes pop {
    from {
        opacity: 0;
        -webkit-transform: scale(0.66);
        transform: scale(0.66);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes pop {
    from {
        opacity: 0;
        -webkit-transform: scale(0.66);
        transform: scale(0.66);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes grow {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes grow {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes up {
    from {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes up {
    from {
        opacity: 0;
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

HTML

ai chatbot with react.js and dialogflow api

h5, robot, ai, chat

编辑器支持Emmet

快捷键

ai chatbot with react.js and dialogflow api

h5, robot, ai, chat

基于React实现的交互式BB-8机器人

基于shape-outside和svg实现可交互拖拉塑形的文本环绕效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：