tut-update

modules/tutorials/pages/spotter/spotter-in-custom-chatbot.adoc

@@ -9,6 +9,9 @@
 
 In this article, we'll use ThoughtSpot's https://github.com/thoughtspot/visual-embed-sdk[Visual Embed SDK^] to add analytics and interactive data visualizations to your own chatbot. To view the full code used in this tutorial, visit our link:https://codesandbox.io/p/sandbox/bodyless-sample-doc-5q3dwr[CodeSandbox^].
 
+[.widthAuto]
+image::./images/spotter-custom-chatbot.gif[Spotter Chatbot]
+
 == Install Visual Embed SDK
 
 ----
@@ -84,3 +87,63 @@ app.insertAdjacentElement("beforeend", div);
 
 And that’s a wrap! This was a super quick tutorial on how to use Spotter embed APIs to integrate conversational analytics with your chatbot!
 Visit the link:https://codesandbox.io/p/sandbox/bodyless-sample-doc-5q3dwr[CodeSandbox^] to see it in action in a sample chatbot we created.
+
+Here is the complete code used in this tutorial:
+
+[source,javascript]
+----
+import {
+  BodylessConversation,
+  init,
+  AuthType,
+} from "@thoughtspot/visual-embed-sdk";
+
+init({
+  thoughtSpotHost: "https://try-everywhere.thoughtspot.cloud",
+  authType: AuthType.None,
+});
+
+const app = document.getElementById("app");
+const input = document.getElementById("input");
+const loader = document.getElementById("loader");
+const reset = document.getElementById("reset");
+
+let conversation;
+
+function initConversation() {
+  conversation = new BodylessConversation({
+    worksheetId: "cd252e5c-b552-49a8-821d-3eadaa049cca",
+  });
+  app?.innerHTML = "";
+}
+initConversation();
+
+async function sendMessage(message) {
+  const viz = await conversation.sendMessage(message);
+  const div = document.createElement("div");
+  div.classList.add("viz");
+  div.append(viz.container);
+  app.insertAdjacentElement("beforeend", div);
+  div.scrollIntoView({
+    behavior: "smooth",
+  });
+}
+
+input.addEventListener("keydown", async (e) => {
+  console.log(e.key);
+  if (e.key !== "Enter") {
+    return;
+  }
+
+  loader?.style.visibility = "visible";
+  const message = input.value;
+  input.value = "";
+  await sendMessage(message);
+  loader?.style.visibility = "hidden";
+});
+
+reset?.addEventListener("click", (e) => {
+  initConversation();
+});
+----
+