Azure聊天机器人与网络聊天会话登录上没有上述选项的选择由用户

我是新的网络聊天服务，并试图创建一个聊天机器人在纯java脚本代码，可以很容易地嵌入到任何html文件，我已经参考了微软提供的文档，但我仍然很困惑，我想记录用户对话分析时，用户查询的东西和聊天机器人返回选项与none of the above作为最后一个选项，用户选择该none of the above选项
我想以下列方式记录数据{ userQuery : "query written by user to which chatbot returns以上都没有" botResponse : "options returned but the chatbot (e.g in my case its 4 with以上都没有as last option )" selectedResponse : "none of the above" // user selected option }选项
任何帮助是赞赏提前感谢你！
任何答案都会有帮助。
这是我创建的代码，但它没有按预期工作。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Web Chat: Styled Chatbot</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script
      type="text/javascript"
      src="https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
    ></script>
    <!-- Application Insights SDK -->

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      body {
        font-family: "Arial", sans-serif;
        overflow: hidden; /* Prevent scrolling of the entire page when chatbot is open */
      }

      #webchat-container {
        position: fixed;
        bottom: 65px;
        right: 20px;
        display: none;
        max-width: 560px;
        width: 100%;
        height: 74dvh;
        /* height: 600px; */
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        background-color: #fff;
        flex-direction: column;
      }
      .wc-header {
        background-color: #0099cc;
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
        width: 100%;
      }
      #webchat-header {
        background-color: #0099cc;
        color: white;
        padding: 11px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        cursor: pointer;
        /* position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        width: 96%; */
      }

      #webchat-header .close-button {
        cursor: pointer;
      }

      #webchat-header .close-button:hover {
        background-color: #0077a3;
      }

      #webchat-content {
        overflow-y: auto;
        max-height: calc(100% - 110px);
        padding: 10px;
      }
      .webchat__send-box__main {
        bottom: 0;
        box-sizing: border-box;
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
      }
      .webchat__send-box__main div:first-child {
        display: none;
      }
      .webchat__upload-button svg {
        display: none;
      }
      .webchat__upload-button {
        display: none;
      }

      #lets-connect-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #0099cc;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s;
        z-index: 9999; /* Ensure the button is on top of everything */
      }

      #lets-connect-button:hover {
        background-color: #0077a3;
      }
    </style>
  </head>

  <body>
    <div id="lets-connect-button">Let's Connect</div>
    <div id="webchat-container">
      <div id="webchat-header">
        Chat Bot
        <div class="close-button">✖</div>
      </div>
      <div id="webchat-content"></div>
    </div>

    <script>
      var appInsights = new Microsoft.ApplicationInsights.ApplicationInsights({
        config: { instrumentationKey: "instrumentation-key " },
        enableCorsCorrelation: true,
      });
      appInsights.loadAppInsights(); // Load Application Insights

      // Function to toggle the chatbot container
      function toggleChatbot() {
        const webchatContainer = document.getElementById("webchat-container");
        const letsConnectButton = document.getElementById(
          "lets-connect-button"
        );

        if (webchatContainer.style.display === "block") {
          webchatContainer.style.display = "none";
          letsConnectButton.style.display = "block";
        } else {
          webchatContainer.style.display = "block";
          letsConnectButton.style.display = "none";
        }
      }
      document
        .getElementById("lets-connect-button")
        .addEventListener("click", toggleChatbot);

      document
        .querySelector("#webchat-header .close-button")
        .addEventListener("click", toggleChatbot);

      (async function () {
        // Function to fetch the Cognitive Services Speech Services credentials
        function createFetchSpeechServicesCredentials() {
          let expireAfter = 0;
          let lastPromise;

          return () => {
            const now = Date.now();
            
            if (now > expireAfter) {
              expireAfter = now + 300000;
              lastPromise = fetch(
                "https://westus2.api.cognitive.microsoft.com/sts/v1.0/issuetoken",
                {
                  method: "POST",
                }
              ).then(
                // (res) => res.json(),
                (res) => res.text(),
                (err) => {
                  expireAfter = 0;

                  return Promise.reject(err);
                }
              );
            }

            return lastPromise;
          };
        }

        const fetchSpeechServicesCredentials =
          createFetchSpeechServicesCredentials();

        // Create the ponyfill factory function
        const webSpeechPonyfillFactory =
        await window.WebChat.createCognitiveServicesSpeechServicesPonyfillFactory(
          {
            credentials: fetchSpeechServicesCredentials,
            textNormalization: "lexical",
          }
        );
        

        let userQueries = [];
        const activityLoggerMiddleware = () => {
          // activity logger middleware but not working 

          return (next) => (action) => {
            if (action.activity && action.activity.type === "message") {
              console.log("action: ", action);
              const isUserActivity =
                action.activity.from.role === "user" &&
                action.activity.channelData.state === "sent";

              if (isUserActivity) {
                console.log("query----------- ");
                if (
                  action.activity.channelData.clientActivityID &&
                  // action.activity.text !== "None of the above." &&
                  action.activity.text !== userQueries[userQueries.length - 1]
                ) {
                  if (
                    action.nextVisibleActivity &&
                    action.nextVisibleActivity.text !== "No answer found"
                  ) {
                    console.log(" action.nextVisibleActivity: =======", action);
                    userQueries.push(action.activity.text);
                    console.log("userQueries: ", userQueries);

                    if (action.activity.text === "None of the above.") {
                      sendTrackEvent(action);
                    }
                  }
                }
              }
            }

            return next(action);
          };
        };

        const activityLoggerMiddleware2 = () => (next) => (context) => {
          if (
            /** user send query and its associated response comes in nextVisibleActivity */
            context.nextVisibleActivity &&
            context.activity.channelData.state === "sent"
          ) {
            console.log("context: ", context);
          }

          return next(context);
        };

        function onNoneOfTheAboveSelectionLogActivity(
          from,
          userQuery,
          selectedOption
        ) {
          appInsights.trackEvent({
            name: "NoneOfTheAboveSelected",
            properties: {
              from: from + "-testing",
              userQuery,
              selectedOption,
            },
          });
        }
        // Pass a Web Speech ponyfill factory to renderWebChat
        window.WebChat.renderWebChat(
          {
            directLine: window.WebChat.createDirectLine({
              secret: "directline-secret",
            }),
            activityMiddleware: [activityLoggerMiddleware2],
            webSpeechPonyfillFactory,
          },
          document.getElementById("webchat-content")
        );
      })().catch((err) => console.error(err));
    </script>
  </body>
</html>

为传入的用户消息和传出的bot消息添加事件处理程序。

const userQueries = [];

const activityLoggerMiddleware = () => {
  return (next) => (action) => {
    if (action.activity) {
      const isUserActivity = action.activity.from.role === "user";
      const isBotActivity = action.activity.from.role === "bot";

      if (isUserActivity) {
        const userQuery = action.activity.text;

        // Log the user query to Application Insights
        logUserQuery(userQuery);

        if (userQuery === "None of the above.") {
          // Log "None of the above" selection using the associated user query
          logNoneOfTheAbove(userQueries[userQueries.length - 1]);
        }
      } else if (isBotActivity) {
        // Handle bot responses here
      }
    }

    return next(action);
  };
};

function logUserQuery(userQuery) {
  // Store the user query along with a flag indicating it's NOTA-related
  userQueries.push({ query: userQuery, isNotaRelated: false });
}

function logNoneOfTheAbove(selectedOption) {
  // Find the most recent user query associated with NOTA
  const notaRelatedQuery = userQueries
    .slice()
    .reverse()
    .find((query) => query.isNotaRelated);

  if (notaRelatedQuery) {
    // Log "None of the above" selection with the associated user query
    appInsights.trackEvent({
      name: "NoneOfTheAboveSelected",
      properties: {
        userQuery: notaRelatedQuery.query,
        botResponse: "Your bot response options here", // Replace with actual options
        selectedOption: selectedOption,
      },
    });
  }
}

在上面的脚本中，你可以看到修改后的activityLoggerMiddleware，我们可以记录用户和机器人消息。

我创建了一个Azure机器人服务，并实现了一个机器人服务应用程序，并从下面我采取了直接线密钥访问。

我们可以在代码中配置Application Insights，如下所示。

var appInsights = new Microsoft.ApplicationInsights.ApplicationInsights({
  config: { instrumentationKey: "your-instrumentation-key" },
  enableCorsCorrelation: true,
});

或者直接只在机器人服务中配置。

这样，当用户选择以上均不时，它将在Application Insights中记录用户查询、机器人响应和所选响应。

Azure聊天机器人与网络聊天会话登录上没有上述选项的选择由用户

1条答案

相关问题

热门标签

最新问答