Building a Messaging UI with Tabs, Sidebar, and Message View in Astro

import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const APP_ID   = import.meta.env.PUBLIC_COMETCHAT_APP_ID;
const REGION   = import.meta.env.PUBLIC_COMETCHAT_REGION;
const AUTH_KEY = import.meta.env.PUBLIC_COMETCHAT_AUTH_KEY;

export async function initCometChat() {
  if (!APP_ID || !REGION || !AUTH_KEY) {
    throw new Error("Missing PUBLIC_COMETCHAT_* env vars.");
  }

  const settings = new UIKitSettingsBuilder()
    .setAppId(APP_ID)
    .setRegion(REGION)
    .setAuthKey(AUTH_KEY) // use Auth Tokens in prod
    .subscribePresenceForAllUsers()
    .build();

  await CometChatUIKit.init(settings);
}

export async function ensureLogin(uid) {
  const existing = await CometChatUIKit.getLoggedinUser();
  if (!existing) await CometChatUIKit.login(uid);
}

import { useState } from "react";
// CSS styling is handled by tabs-layout.css imported in the main page

const chatsIcon  = "/assets/chats.svg";
const callsIcon  = "/assets/calls.svg";
const usersIcon  = "/assets/users.svg";
const groupsIcon = "/assets/groups.svg";

export default function CometChatTabs({ activeTab = "chats", onTabClicked = () => {} }) {
  const [hover, setHover] = useState("");

  const items = [
    { name: "CHATS",  icon: chatsIcon  },
    { name: "CALLS",  icon: callsIcon  },
    { name: "USERS",  icon: usersIcon  },
    { name: "GROUPS", icon: groupsIcon },
  ];

  return (
    <div className="cometchat-tab-component">
      {items.map((t) => {
        const key = t.name.toLowerCase();
        const active = activeTab === key || hover === key;
        return (
          <div
            key={t.name}
            className="cometchat-tab-component__tab"
            onClick={() => onTabClicked({ name: t.name })}
            onMouseEnter={() => setHover(key)}
            onMouseLeave={() => setHover("")}
          >
            {/* if icons not present, this still renders a label-only tab */}
            {t.icon ? (
              <div
                className={
                  "cometchat-tab-component__tab-icon " +
                  (active ? "cometchat-tab-component__tab-icon-active" : "")
                }
                style={{
                  WebkitMaskImage: `url(${t.icon})`,
                  maskImage: `url(${t.icon})`,
                }}
              />
            ) : null}
            <div
              className={
                "cometchat-tab-component__tab-text " +
                (active ? "cometchat-tab-component__tab-text-active" : "")
              }
            >
              {t.name}
            </div>
          </div>
        );
      })}
    </div>
  );
}

import { useEffect, useState } from "react";
import {
  CometChatUIKit,
  CometChatConversations,
  CometChatUsers,
  CometChatGroups,
  CometChatCallLogs,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";
import CometChatTabs from "./CometChatTabs.jsx";
import { initCometChat } from "../lib/cometchat-init.js";

const LOGIN_UID = import.meta.env.PUBLIC_COMETCHAT_LOGIN_UID; // UID of the user to log in as

export default function TabbedChat() {
  const [phase, setPhase] = useState("boot"); // boot | ready | error
  const [errorMsg, setErrorMsg] = useState("");

  const [activeTab, setActiveTab] = useState("chats"); // chats | calls | users | groups

  const [selectedUser, setSelectedUser]   = useState(null);
  const [selectedGroup, setSelectedGroup] = useState(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        // Use the centralized init function
        await initCometChat();

        // Check if current logged-in user matches the desired UID
        let me = await CometChatUIKit.getLoggedinUser();
        if (!me || me.getUid() !== LOGIN_UID) {
          // Logout current user if different UID, then login with correct UID
          if (me) {
            await CometChatUIKit.logout();
          }
          me = await CometChatUIKit.login(LOGIN_UID);
        }

        if (!cancelled) setPhase("ready");
      } catch (e) {
        console.error("TabbedChat init error:", e);
        if (!cancelled) {
          setErrorMsg(String(e?.message || e));
          setPhase("error");
        }
      }
    })();

    return () => { cancelled = true; };
  }, [LOGIN_UID]); // Add LOGIN_UID as dependency so effect runs when UID changes

  const handleSelect = (item) => {
    // item can be Conversation, User, Group, or Call
    const maybeConv = item?.getConversationWith ? item.getConversationWith() : null;
    const picked = maybeConv || item;

    if (picked?.getUid) {
      setSelectedUser(picked);
      setSelectedGroup(null);
      setActiveTab("chats"); // keep in chats context
    } else if (picked?.getGuid) {
      setSelectedGroup(picked);
      setSelectedUser(null);
      setActiveTab("chats"); // show messages in same area
    } else {
      // For calls tab, we don’t open message panel
      setSelectedUser(null);
      setSelectedGroup(null);
    }
  };

  if (phase === "boot")  return <div style={{ padding: 16 }}>Loading…</div>;
  if (phase === "error") return <div style={{ padding: 16, color: "crimson" }}><b>CometChat error:</b> {errorMsg}</div>;

  return (
    <div className="cc-tabbed">
      {/* LEFT: Sidebar */}
      <div className="cc-tabbed__sidebar">
        <div className="cc-tabbed__list">
          {activeTab === "chats" && (
            <CometChatConversations onItemClick={handleSelect} />
          )}

          {activeTab === "calls" && (
            <CometChatCallLogs
              onItemClick={(call) => {
                // If you integrate Calls SDK later, you can open call details here
                console.log("Call log clicked:", call);
              }}
            />
          )}

          {activeTab === "users" && (
            <CometChatUsers
              onItemClick={(user) => handleSelect(user)}
            />
          )}

          {activeTab === "groups" && (
            <CometChatGroups
              onItemClick={(group) => handleSelect(group)}
            />
          )}
        </div>

        {/* Tabs bar at bottom */}
        <CometChatTabs
          activeTab={activeTab}
          onTabClicked={(t) => setActiveTab(t.name.toLowerCase())}
        />
      </div>

      {/* RIGHT: Messages panel (appears for chats/users/groups) */}
      <div className="cc-tabbed__main">
        {activeTab === "calls" ? (
          <div className="cc-tabbed__empty">Select a call log</div>
        ) : selectedUser || selectedGroup ? (
          <>
            <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
            <div className="cc-tabbed__list-slot">
              <CometChatMessageList user={selectedUser} group={selectedGroup} />
            </div>
            <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
          </>
        ) : (
          <div className="cc-tabbed__empty">Select a conversation to start</div>
        )}
      </div>
    </div>
  );
}

---
import TabbedChat from "../components/TabbedChat.jsx";
import "../styles/tabs-layout.css";   // the CSS from this setup
// (optional) also import your existing globals.css if you have one
import "../styles/globals.css";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Tabbed Messaging UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <!-- Client-only; CometChat needs browser APIs -->
    <TabbedChat client:only="react" />
  </body>
</html>