Merge pull request #573 from talkjs/feat/add-typing-indicator

Add a bot typing indicator to the OpenAI chatbot example

Author: keerlu

chatbot-integration/openai-chatgpt/README.md

@@ -4,8 +4,7 @@ This is an example project for TalkJS's tutorial on [How to integrate a chatbot
 
 The project uses TalkJS webhooks to listen for new message events from the TalkJS server, calls the OpenAI API to generate a message reply, and then adds the reply to the conversation with the TalkJS API.
 
-> [!TIP]
-> [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.openai-chatgpt.zip)
+> [!TIP] > [Download this example project as a zip file](https://github.com/talkjs/talkjs-examples/releases/latest/download/chatbot-integration.openai-chatgpt.zip)
 
 ## Prerequisites
 
@@ -23,7 +22,25 @@ To run this tutorial, you will need:
 2. Replace `<APP_ID>` and `<TALKJS_SECRET_KEY>` in `index.html` and `server.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login).
 3. Replace `<OPENAI_SECRET_KEY>` with your OpenAI API key
 4. Enable the `message.sent` option in the **Webhooks** section of the TalkJS dashboard.
-5. Start ngrok with `ngrok http 3000`.
-6. Add the ngrok URL to **Webhook URLs** in the TalkJS dashboard.
-7. Run `npm install` to install dependencies.
-8. Run `npm start` to start the webhooks server.
+5. Update the theme to show a typing indicator when the bot is generating a response. In the **Themes** tab, select to **Edit** the `default` theme. Select the `UserMessage` component from the list of **Built-in components** and replace the existing `MessageBody` component with the following:
+
+   ```jsx
+   <div t:if="{{ custom.isTyping == 'true' }}" class="typing-indicator">
+       <TypingIndicator />
+   </div>
+
+   <MessageBody  t:else
+       body="{{ body }}"
+       timestamp="{{ timestamp }}"
+       floatTimestamp="auto"
+       showStatus="{{ sender.isMe }}"
+       isLongEmailMessage="{{isLongEmailMessage}}"
+       darkenMenuArea="{{ darkenMenuArea }}"
+       hasReferencedMessage="{{ hasReferencedMessage }}"
+   />
+   ```
+
+6. Start ngrok with `ngrok http 3000`.
+7. Add the ngrok URL to **Webhook URLs** in the TalkJS dashboard, along with the `/onMessageSent` path: `https://<YOUR_SITE>.ngrok-free.app/onMessageSent`.
+8. Run `npm install` to install dependencies.
+9. Run `npm start` to start the webhooks server.

chatbot-integration/openai-chatgpt/index.html

@@ -65,9 +65,9 @@
       conversation.setParticipant(me);
       conversation.setParticipant(bot);
 
-      const inbox = talkSession.createChatbox();
-      inbox.select(conversation);
-      inbox.mount(document.getElementById("talkjs-container"));
+      const chatbox = talkSession.createChatbox();
+      chatbox.select(conversation);
+      chatbox.mount(document.getElementById("talkjs-container"));
     });
   </script>
 

chatbot-integration/openai-chatgpt/server.js

@@ -4,6 +4,7 @@ import OpenAI from "openai";
 
 const appId = "<APP_ID>";
 const talkJSSecretKey = "<TALKJS_SECRET_KEY>";
+const basePath = "https://api.talkjs.com";
 
 const openAISecretKey = "<OPENAI_SECRET_KEY>";
 const openai = new OpenAI({ apiKey: openAISecretKey });
@@ -14,16 +15,15 @@ const allMessageHistory = {};
 async function getCompletion(messageHistory) {
   const completion = await openai.chat.completions.create({
     messages: messageHistory,
-    model: "gpt-3.5-turbo",
+    model: "gpt-4o-mini",
   });
-
   const reply = completion.choices[0].message.content;
   return reply;
 }
 
-async function sendMessage(conversationId, text) {
-  return fetch(
-    `https://api.talkjs.com/v1/${appId}/conversations/${conversationId}/messages`,
+async function sendInitialMessage(conversationId) {
+  const response = await fetch(
+    `${basePath}/v1/${appId}/conversations/${conversationId}/messages`,
     {
       method: "POST",
       headers: {
@@ -32,13 +32,49 @@ async function sendMessage(conversationId, text) {
       },
       body: JSON.stringify([
         {
-          text: text,
-          sender: "chatbotExampleBot",
+          text: "_Let me think for a bit..._", // Placeholder text that the theme will replace with a typing indicator
+          sender: botId,
           type: "UserMessage",
+          custom: { isTyping: "true" },
         },
       ]),
     }
   );
+
+  // Return the message ID for later editing
+  const data = await response.json();
+  return data[0].id;
+}
+
+async function updateBotMessage(conversationId, messageId, text) {
+  return fetch(
+    `${basePath}/v1/${appId}/conversations/${conversationId}/messages/${messageId}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${talkJSSecretKey}`,
+      },
+      body: JSON.stringify({
+        text: text,
+        custom: { isTyping: "false" },
+      }),
+    }
+  );
+}
+
+async function setUserAccess(conversationId, userId, access) {
+  return fetch(
+    `${basePath}/v1/${appId}/conversations/${conversationId}/participants/${userId}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${talkJSSecretKey}`,
+      },
+      body: JSON.stringify({ access: access }),
+    }
+  );
 }
 
 const app = express();
@@ -58,18 +94,19 @@ app.post("/onMessageSent", async (req, res) => {
       },
     ];
   }
+
   const messageHistory = allMessageHistory[convId];
 
-  if (senderId == botId) {
-    // Bot message
-    messageHistory.push({ role: "assistant", content: messageText });
-  } else {
-    // User message
+  if (senderId != botId) {
     messageHistory.push({ role: "user", content: messageText });
-    getCompletion(messageHistory).then((reply) => sendMessage(convId, reply));
+    const messageId = await sendInitialMessage(convId);
+    await setUserAccess(convId, senderId, "Read");
+    const reply = await getCompletion(messageHistory);
+    await updateBotMessage(convId, messageId, reply);
+    messageHistory.push({ role: "assistant", content: reply });
+    await setUserAccess(convId, senderId, "ReadWrite");
   }
 
   res.status(200).end();
 });
 
-app.listen(3000, () => console.log("Server is up"));