@upstash/chatbox

api.js

// pages/api/chatbox/[...chatbox].js

import createChatBoxAPI from "@upstash/chatbox/api";

const ChatBoxAPI = createChatBoxAPI({
  webhooks: [process.env.SLACK_WEBHOOK_URL!],
});

export default ChatBoxAPI;

app.jsx

// pages/_app.jsx

import "@upstash/chatbox/index.css";

import { AppProps } from "next/app";
import dynamic from "next/dynamic";

const ChatBoxWidget = dynamic({
  loader: () => import("@upstash/chatbox").then((mod) => mod.ChatBoxWidget),
  ssr: false,
});

export default function App(props: AppProps) {
  const { Component, pageProps } = props;

  return (
    <>
      <ChatBoxWidget />
      <Component {...pageProps} />
    </>
  );
}

chat.jsx

// pages/chat/[id].jsx

import dynamic from "next/dynamic";

const ChatBoxAdmin = dynamic({
  loader: () => import("@upstash/chatbox").then((mod) => mod.ChatBoxAdmin),
  ssr: false,
});

export default function () {
  return <ChatBoxAdmin />;
}