Slack (Preview) 🚧

import HydraClient from "hydra-ai";
 
const hydraClient = new HydraClient("gpt-4", "openai");

import { jsxslack } from "jsx-slack";
import { Blocks, Section } from "jsx-slack";
 
export const welcomeMessage = ({ userName }: { userName: string }) => jsxslack`
  <Blocks>
    <Section>
      Hello, <b>${userName}</b>! 🎉 We're excited to have you onboard.
    </Section>
  </Blocks>
`;
 
await hydraClient.registerComponent(
  "welcomeMessage",
  "A personalized welcome message for Slack users.",
  welcomeMessage,
  { userName: { type: "string", required: true } }
);

const generatedComponent = await hydraClient.generateComponent(
  "Send a welcome message to Jane Doe",
  (progress) => console.log(`Progress: ${progress}`)
);
 
console.log("Generated Component:", generatedComponent.component);

import { WebClient } from "@slack/web-api";
 
const slackClient = new WebClient(process.env.SLACK_TOKEN);
 
await slackClient.chat.postMessage({
  channel: "C1234567890", // Replace with your channel ID
  blocks: generatedComponent.component,
});

await hydraClient.registerComponent(
  "dynamicUserList",
  "A Slack message showing a dynamic user list",
  (props) => jsxslack`
    <Blocks>
      <Section>
        <b>Here are the current users:</b>
      </Section>
      ${props.userList.map((user) => `<Section>${user}</Section>`).join("")}
    </Blocks>
  `,
  { userList: { type: "array", required: true } },
  [
    {
      definition: {
        name: "fetchUsers",
        description: "Fetch a list of users from an external API",
        parameters: [],
      },
      getComponentContext: async () => {
        const response = await fetch("https://api.example.com/users");
        return await response.json();
      },
    },
  ]
);

import { Modal, Input, Section, Divider } from "jsx-slack";
 
export const feedbackModal = () => jsxslack`
  <Modal title="Feedback Form" close="Cancel">
    <Section>Please provide your feedback below:</Section>
    <Divider />
    <Input type="text" name="userName" label="Name" required />
    <Input type="textarea" name="feedback" label="Feedback" required />
    <Input type="submit" value="Submit" />
  </Modal>
`;
 
await hydraClient.registerComponent(
  "feedbackModal",
  "A feedback form in Slack modal format.",
  feedbackModal
);

await slackClient.views.open({
  trigger_id: "YOUR_TRIGGER_ID", // Replace with your trigger ID
  view: generatedModal.component,
});