Hooks

Copy"use client";
 
import { useSupport } from "@cossistant/next";
 
export function CustomSupportButton() {
  const { isOpen, toggle, unreadCount } = useSupport();
 
  return (
    <button
      onClick={toggle}
      className="relative rounded-lg bg-primary px-4 py-2 text-white"
    >
      Support
      {unreadCount > 0 && (
        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs">
          {unreadCount}
        </span>
      )}
    </button>
  );
}

Copy"use client";
 
import { useVisitor } from "@cossistant/next";
import { useEffect } from "react";
 
export function AuthHandler({ user }) {
  const { visitor, identify } = useVisitor();
 
  useEffect(() => {
    // Only identify if we have a user and visitor isn't already a contact
    if (user && !visitor?.contact) {
      identify({
        externalId: user.id,
        email: user.email,
        name: user.name,
        image: user.avatar,
      });
    }
  }, [user, visitor?.contact, identify]);
 
  return null;
}

Copy"use client";
 
import { useVisitor } from "@cossistant/next";
 
export function UpgradeButton() {
  const { setVisitorMetadata } = useVisitor();
 
  const handleUpgrade = async () => {
    // Upgrade user's plan
    await upgradeToPro();
 
    // Update contact metadata so support agents see the change
    await setVisitorMetadata({
      plan: "pro",
      upgradedAt: new Date().toISOString(),
      mrr: 99,
    });
  };
 
  return <button onClick={handleUpgrade}>Upgrade to Pro</button>;
}

Copy"use client";
 
import { useSupportConfig } from "@cossistant/next/support";
 
export function CustomToggle() {
  const { isOpen, open, close, toggle, size } = useSupportConfig();
 
  return (
    <div className="flex gap-2">
      <button onClick={toggle}>
        {isOpen ? "Close Support" : "Open Support"}
      </button>
      <span>Size: {size}</span>
    </div>
  );
}

Copy"use client";
 
import { useSupportNavigation } from "@cossistant/next/support";
 
export function NavigationButtons() {
  const { page, navigate, goBack, canGoBack } = useSupportNavigation();
 
  return (
    <div className="flex gap-2">
      {canGoBack && <button onClick={goBack}>← Back</button>}
      <span>Current page: {page}</span>
      <button onClick={() => navigate({ page: "HOME" })}>Go Home</button>
      <button
        onClick={() =>
          navigate({
            page: "CONVERSATION",
            params: { conversationId: "conv_123" }
          })
        }
      >
        Open Conversation
      </button>
    </div>
  );
}

Copy"use client";
 
import { useSupportHandle } from "@cossistant/next/support";
 
export function HelpButton() {
  const support = useSupportHandle();
 
  const handleNeedHelp = () => {
    // Open support and start a new conversation
    support?.startConversation("I need help with my order");
  };
 
  return (
    <button onClick={handleNeedHelp}>
      Need Help?
    </button>
  );
}

Copy"use client";
 
import { useHomePage } from "@cossistant/next";
 
export function CustomHomePage() {
  const home = useHomePage({
    onStartConversation: () => console.log("Conversation started"),
    onOpenConversation: (id) => console.log("Opened:", id),
  });
 
  return (
    <div>
      <h1>Welcome!</h1>
 
      {home.lastOpenConversation && (
        <button onClick={() => home.openConversation(home.lastOpenConversation!.id)}>
          Continue conversation
        </button>
      )}
 
      <button onClick={() => home.startConversation()}>
        Start new conversation
      </button>
 
      {home.availableConversationsCount > 0 && (
        <button onClick={home.openConversationHistory}>
          View {home.availableConversationsCount} conversations
        </button>
      )}
    </div>
  );
}

Copy"use client";
 
import { useConversationPage } from "@cossistant/next";
 
export function CustomConversationPage({ conversationId }: { conversationId: string }) {
  const conversation = useConversationPage({
    conversationId,
    onConversationIdChange: (id) => console.log("Active:", id),
  });
 
  return (
    <div>
      {/* Messages */}
      <div className="flex-1 overflow-y-auto">
        {conversation.items.map((item) => (
          <div key={item.id}>{/* Render message */}</div>
        ))}
      </div>
 
      {/* Composer */}
      <form onSubmit={(e) => { e.preventDefault(); conversation.composer.submit(); }}>
        <input
          value={conversation.composer.message}
          onChange={(e) => conversation.composer.setMessage(e.target.value)}
          placeholder={conversation.isPending ? "Start the conversation..." : "Type a message..."}
        />
        <button
          type="submit"
          disabled={!conversation.composer.canSubmit || conversation.composer.isSubmitting}
        >
          Send
        </button>
      </form>
    </div>
  );
}

Copy"use client";
 
import { useMessageComposer } from "@cossistant/next";
 
export function MessageInput({ conversationId }: { conversationId: string }) {
  const composer = useMessageComposer({
    conversationId,
    onMessageSent: () => console.log("Message sent!"),
  });
 
  return (
    <form onSubmit={(e) => { e.preventDefault(); composer.submit(); }}>
      <input
        value={composer.message}
        onChange={(e) => composer.setMessage(e.target.value)}
        placeholder="Type a message..."
      />
      <input
        type="file"
        multiple
        onChange={(e) => {
          if (e.target.files) {
            composer.addFiles(Array.from(e.target.files));
          }
        }}
      />
      {composer.files.map((file, index) => (
        <span key={file.name}>
          {file.name}{" "}
          <button type="button" onClick={() => composer.removeFile(index)}>
            ×
          </button>
        </span>
      ))}
      <button type="submit" disabled={!composer.canSubmit || composer.isSubmitting}>
        {composer.isSubmitting ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Copy"use client";
 
import { useFileUpload } from "@cossistant/next";
 
export function FileUploader() {
  const upload = useFileUpload();
  const conversationId = "conv_123";
 
  return (
    <div>
      <input
        type="file"
        multiple
        onChange={async (e) => {
          if (e.target.files?.length) {
            await upload.uploadFiles(Array.from(e.target.files), conversationId);
          }
        }}
      />
      {upload.isUploading && (
        <div>
          <progress value={upload.progress} max={100} />
          <span>{upload.progress}%</span>
        </div>
      )}
      {upload.error && <p className="text-red-500">{upload.error.message}</p>}
    </div>
  );
}

Copy"use client";
 
import { useSupportText } from "@cossistant/next/support";
 
export function LocalizedButton() {
  const format = useSupportText();
 
  return (
    <button>
      {format("common.actions.askQuestion")}
    </button>
  );
}

Copy"use client";
 
import { useSupportEvents } from "@cossistant/next/support";
import { useEffect } from "react";
 
export function AnalyticsTracker() {
  const events = useSupportEvents();
 
  useEffect(() => {
    if (!events) return;
 
    const unsubscribe = events.subscribe("messageSent", (event) => {
      // Track in your analytics
      analytics.track("support_message_sent", {
        conversationId: event.conversationId,
      });
    });
 
    return unsubscribe;
  }, [events]);
 
  return null;
}