我需要一个网页,网页右下角有一个按钮，点一下出现智能客服的聊天窗口，使用 Rasa Web Chat 工具来实现嵌入式聊天窗口，需要添加一个输入框，用于用户输入文本问题，一个按钮用于提交问题，以及一个输出框，用于展示机器人的回答。写代码示例

好的，下面是一个简单的示例代码，实现了在网页右下角添加一个按钮，点击后弹出智能客服聊天窗口，用户可以在输入框中输入文本问题并提交，机器人会在输出框中展示回答。这个示例使用了 React 和 Rasa Web Chat 组件。

import React, { useState } from "react";
import { Widget } from "rasa-webchat";

function ChatWidget() {
  const [showChat, setShowChat] = useState(false);
  const [inputText, setInputText] = useState("");
  const [messages, setMessages] = useState([]);

  const handleInputChange = (event) => {
    setInputText(event.target.value);
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      sendMessage();
    }
  };

  const sendMessage = () => {
    if (inputText.trim() === "") return;
    setMessages([...messages, { message: inputText, sender: "user" }]);
    setInputText("");
  };

  const handleMessageReceived = (message) => {
    setMessages([...messages, { message: message, sender: "bot" }]);
  };

  return (
    <div>
      <button onClick={() => setShowChat(!showChat)}>Chat with us</button>
      {showChat && (
        <div>
          <Widget
            initPayload={"/get_started"}
            socketUrl={"http://localhost:5005"}
            title={"Your Bot's Name"}
            subtitle={"Your Bot's Description"}
            inputTextFieldHint={"Type a message..."}
            onSocketEvent={handleMessageReceived}
            customData={{ language: "en" }}
          />
          <div>
            {messages.map((message, index) => (
              <div key={index}>
                {message.sender === "user" ? (
                  <div>You: {message.message}</div>
                ) : (
                  <div>Bot: {message.message}</div>
                )}
              </div>
            ))}
          </div>
          <div>
            <input
              type="text"
              value={inputText}
              onChange={handleInputChange}
              onKeyDown={handleKeyDown}
            />
            <button onClick={sendMessage}>Send</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default ChatWidget;

这个示例代码中，我们定义了一个 ChatWidget 组件，其中包含一个按钮和一个 boolean 类型的 showChat 状态，用于控制聊天窗口的显示和隐藏。当用户点击按钮时，showChat 状态会切换为相反的值，从而显示或隐藏聊天窗口。

在聊天窗口中，我们定义了一个输入框和一个按钮，用于用户输入文本问题并提交。用户输入文本后，我们会将输入文本添加到 messages 状态中，同时清空输入框。机器人的回答会在 onSocketEvent 回调函数中接收到，我们将回答添加到 messages 状态中，并在页面中展示出来。

注意，这个示例代码中的 socketUrl 和 customData 都需要根据你自己的聊天机器人进行修改。socketUrl 是你的聊天机器人的地址，customData 是你要传递给聊天机器人的自定义数据。另外，这个示例中的输入框和按钮样式非常简单，你可以根据自己的需求进行修改。