chatkit/frontend/src/components/SimpleChatPanel.tsx

import { ChatKit, useChatKit } from "@openai/chatkit-react";

const CHATKIT_API_URL = "/chatkit";
const CHATKIT_API_DOMAIN_KEY = "domain_pk_localhost_dev";

export function SimpleChatPanel() {
  const chatkit = useChatKit({
    api: { url: CHATKIT_API_URL, domainKey: CHATKIT_API_DOMAIN_KEY },
    composer: {
      attachments: { enabled: false },
    },
  });

  return (
    <div className="relative pb-8 flex h-[90vh] w-full rounded-2xl flex-col overflow-hidden bg-white shadow-sm transition-colors dark:bg-slate-900">
      <ChatKit control={chatkit.control} className="block h-full w-full" />
    </div>
  );
}