Step 3: Add Hydra AI listener

In this step, we'll add a message listener that sends messages to Hydra AI and responds to the user with Hydra's output.

Add Hydra AI message listener

1. Add Hydra AI message handler file

   Create a new file called hydra-message.ts under src/listeners/messages directory and copy the following code into the file:

   import { AllMiddlewareArgs } from "@slack/bolt";
   import { GenerateComponentResponse } from "@hydra-ai/slack/dist/hydra-ai/model/generate-component-response";
   import { SlackEventMiddlewareArgs } from "@slack/bolt";
   import { initializeHydra } from "../../hydra-config";
    
   export const hydraMessageCallback = async ({
       message,
       say,
       client,
   }: AllMiddlewareArgs & SlackEventMiddlewareArgs<'message'>) => {
       // Store the message ts for updates
       let progressMessageTs: string;
    
       const handleProgressUpdate = async (progress: GenerateComponentResponse) => {
           if (!progressMessageTs) return;
    
           try {
               await client.chat.update({
                   channel: message.channel,
                   ts: progressMessageTs,
                   text: progress.message || "Thinking...",
                   blocks: progress.component ? [
                       {
                           type: "section",
                           text: {
                               type: "mrkdwn",
                               text: progress.message || "Thinking..."
                           }
                       },
                       ...progress.component
                   ] : [
                       {
                           type: "section",
                           text: {
                               type: "mrkdwn",
                               text: progress.message || "Thinking..."
                           }
                       }
                   ]
               });
           } catch (error) {
               console.error('Error updating progress message:', error);
           }
       };
    
       const messageText = (message as any).text;
       try {
           // Store the initial message response
           const initialMessage = await client.chat.postMessage({
               channel: message.channel,
               text: "...",
               blocks: [{
                   type: "section",
                   text: {
                       type: "mrkdwn",
                       text: "_Thinking..._"
                   }
               }]
           });
    
           // Save the timestamp for updates
           progressMessageTs = initialMessage.ts || "";
    
           const hydra = initializeHydra();
           await hydra.generateComponent(messageText, handleProgressUpdate);
       } catch (error) {
           console.error(error);
           }
       };

   This handles taking the user's message and sending it to Hydra AI, showing any loading states, and updating the message with Hydra's output.

2. Listen for all messages

   Now we can remove the hello listener and add a message listener that uses the hydraMessageCallback function we just created.

   Replace the contents of src/listeners/messages/index.ts with the following:

   import type { App } from '@slack/bolt';
   import { hydraMessageCallback } from './hydra-message';
    
   const register = (app: App) => {
   app.message(/.*/, hydraMessageCallback);
   };
    
   export default { register };

   You'll notice that this listener is listening for all messages, and so Hydra will respond to any message in a channel where the app is added. You can edit this file to listen for specific messages or channels if you want!

Try it out!

Now that we're sending messages through Hydra, we can try sending messages to it and having it respond!

We haven't registered any components yet, so Hydra will only be able to respond with text. At this point, the app is essentially an LLM chatbot.

1. Run the app

   If it's not running already, run npm start to get the app running again.

2. Send a message to Hydra

   Send a message in a channel where the app is added. You should see a message saying "Thinking..." and then a message with Hydra's response.

In the next step, we'll register the Todo list components and see how Hydra can respond with interactive UI components instead of just text.