@gugacoder/agentic-chat 0.2.0

package/src/display/ProductCardRenderer.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react";
+import type { DisplayProduct } from "@gugacoder/agentic-sdk";
+import { Star } from "lucide-react";
+import { Card, CardContent, CardTitle } from "../ui/card.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { cn } from "../lib/utils.js";
+
+function StarRating({ score, count }: { score: number; count: number }) {
+  const fullStars = Math.floor(score);
+  const hasHalf = score - fullStars >= 0.5;
+  const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
+
+  return (
+    <div
+      className="flex items-center gap-0.5 text-primary"
+      aria-label={`${score} de 5 estrelas (${count} avaliações)`}
+    >
+      {Array.from({ length: fullStars }).map((_, i) => (
+        <Star key={`f${i}`} size={14} fill="currentColor" />
+      ))}
+      {hasHalf && <Star size={14} fill="none" />}
+      {Array.from({ length: emptyStars }).map((_, i) => (
+        <Star key={`e${i}`} size={14} fill="none" className="text-muted-foreground" />
+      ))}
+      <span className="text-xs text-muted-foreground ml-1">({count})</span>
+    </div>
+  );
+}
+
+function formatMoney(value: number, currency = "BRL") {
+  return new Intl.NumberFormat("pt-BR", { style: "currency", currency }).format(value);
+}
+
+export function ProductCardRenderer({
+  title,
+  image,
+  price,
+  originalPrice,
+  rating,
+  badges,
+  url,
+  description,
+}: DisplayProduct) {
+  const [imgError, setImgError] = useState(false);
+
+  const discount =
+    price && originalPrice && originalPrice.value > price.value
+      ? Math.round(((originalPrice.value - price.value) / originalPrice.value) * 100)
+      : null;
+
+  return (
+    <Card className="overflow-hidden w-fit max-w-sm">
+      {image && !imgError && (
+        <div className="relative">
+          <img
+            src={image}
+            alt={title}
+            className={cn("w-full aspect-video object-cover")}
+            loading="lazy"
+            decoding="async"
+            onError={() => setImgError(true)}
+          />
+          {discount !== null && (
+            <Badge variant="destructive" className="absolute top-2 right-2">
+              -{discount}%
+            </Badge>
+          )}
+        </div>
+      )}
+
+      <CardContent className="p-4 space-y-2">
+        {badges && badges.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {badges.map((b, i) => (
+              <Badge key={i} variant="secondary">
+                {b.label}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        <CardTitle className="text-sm">{title}</CardTitle>
+
+        {description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+        )}
+
+        {rating && <StarRating score={rating.score} count={rating.count} />}
+
+        {price && (
+          <div className="flex items-baseline gap-2">
+            <span className="text-lg font-bold">{formatMoney(price.value, price.currency)}</span>
+            {originalPrice && (
+              <span className="text-sm text-muted-foreground line-through">
+                {formatMoney(originalPrice.value, originalPrice.currency)}
+              </span>
+            )}
+          </div>
+        )}
+
+        {url && (
+          <Button className="w-full" size="sm" asChild>
+            <a href={url} target="_blank" rel="noopener noreferrer">
+              Ver produto
+            </a>
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/display/ProgressStepsRenderer.tsx

@@ -0,0 +1,59 @@
+import type { DisplayProgress } from "@gugacoder/agentic-sdk";
+import { Check, Circle, Clock } from "lucide-react";
+import { Progress } from "../ui/progress.js";
+import { Badge } from "../ui/badge.js";
+import { cn } from "../lib/utils.js";
+
+export function ProgressStepsRenderer({ title, steps }: DisplayProgress) {
+  const completed = steps.filter((s) => s.status === "completed").length;
+  const percentage = steps.length > 0 ? Math.round((completed / steps.length) * 100) : 0;
+
+  return (
+    <div className="space-y-3">
+      {title && <p className="font-medium text-foreground">{title}</p>}
+      <div className="flex items-center gap-3">
+        <Progress value={percentage} className="flex-1" />
+        <span className="text-sm text-muted-foreground tabular-nums">{percentage}%</span>
+      </div>
+      <p className="text-sm text-muted-foreground">
+        {completed} de {steps.length} concluídos
+      </p>
+      <ol className="space-y-2">
+        {steps.map((step, index) => {
+          const isCompleted = step.status === "completed";
+          const isPending = step.status === "pending";
+          return (
+            <li key={index} className="flex items-start gap-2">
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "mt-0.5 shrink-0",
+                  isCompleted ? "text-primary" : "text-muted-foreground"
+                )}
+              >
+                {isCompleted ? (
+                  <Check size={16} />
+                ) : isPending ? (
+                  <Circle size={16} />
+                ) : (
+                  <Clock size={16} />
+                )}
+              </span>
+              <div className="flex-1 min-w-0">
+                <p className={cn("text-sm", isCompleted ? "text-foreground" : "text-muted-foreground")}>
+                  {step.label}
+                </p>
+                {step.description && (
+                  <p className="text-xs text-muted-foreground mt-0.5">{step.description}</p>
+                )}
+              </div>
+              <Badge variant="secondary" className="shrink-0 text-xs">
+                {index + 1}
+              </Badge>
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}

package/src/display/SourcesListRenderer.tsx

@@ -0,0 +1,47 @@
+import type { DisplaySources } from "@gugacoder/agentic-sdk";
+import { ExternalLink, Globe } from "lucide-react";
+
+export function SourcesListRenderer({ label, sources }: DisplaySources) {
+  return (
+    <div className="space-y-2">
+      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{label}</p>
+      <ol className="space-y-1">
+        {sources.map((source, index) => (
+          <li key={index}>
+            <a
+              href={source.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start gap-2 p-2 rounded-md hover:bg-muted text-sm"
+            >
+              <span className="text-xs text-muted-foreground font-mono w-5 shrink-0 pt-0.5">
+                {index + 1}
+              </span>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1.5">
+                  {source.favicon ? (
+                    <img
+                      src={source.favicon}
+                      alt=""
+                      width={14}
+                      height={14}
+                      className="shrink-0"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <Globe size={14} className="shrink-0 text-muted-foreground" aria-hidden="true" />
+                  )}
+                  <span className="font-medium text-primary truncate">{source.title}</span>
+                  <ExternalLink size={12} className="shrink-0 text-muted-foreground" aria-hidden="true" />
+                </div>
+                {source.snippet && (
+                  <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{source.snippet}</p>
+                )}
+              </div>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

package/src/display/SpreadsheetRenderer.tsx

@@ -0,0 +1,86 @@
+import type { DisplaySpreadsheet } from "@gugacoder/agentic-sdk";
+import { ScrollArea, ScrollBar } from "../ui/scroll-area.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table.js";
+import { cn } from "../lib/utils.js";
+
+function formatCell(
+  value: string | number | null,
+  colIndex: number,
+  moneyColumns: number[] = [],
+  percentColumns: number[] = [],
+): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "number") {
+    if (moneyColumns.includes(colIndex)) {
+      return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value);
+    }
+    if (percentColumns.includes(colIndex)) {
+      return new Intl.NumberFormat("pt-BR", {
+        style: "percent",
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 2,
+      }).format(value / 100);
+    }
+    return new Intl.NumberFormat("pt-BR").format(value);
+  }
+  return String(value);
+}
+
+export function SpreadsheetRenderer({ title, headers, rows, format }: DisplaySpreadsheet) {
+  const moneyColumns = format?.moneyColumns ?? [];
+  const percentColumns = format?.percentColumns ?? [];
+
+  return (
+    <div className="space-y-2">
+      {title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
+
+      <ScrollArea className="w-full">
+        <Table aria-readonly="true">
+          <TableHeader>
+            <TableRow>
+              <TableHead className="text-muted-foreground font-normal text-center w-10" aria-label="Linha" />
+              {headers.map((h, i) => (
+                <TableHead key={i} className="font-semibold">
+                  {h}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {rows.map((row, ri) => (
+              <TableRow key={ri}>
+                <TableCell className="text-center text-xs text-muted-foreground select-none">
+                  {ri + 1}
+                </TableCell>
+                {row.map((cell, ci) => {
+                  const isMoney = moneyColumns.includes(ci);
+                  const isPercent = percentColumns.includes(ci);
+                  const isNumber = typeof cell === "number";
+                  return (
+                    <TableCell
+                      key={ci}
+                      className={cn(
+                        (isMoney || isPercent || isNumber) && "text-right font-mono text-sm"
+                      )}
+                    >
+                      {formatCell(cell, ci, moneyColumns, percentColumns)}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

package/src/display/StepTimelineRenderer.tsx

@@ -0,0 +1,75 @@
+import type { DisplaySteps } from "@gugacoder/agentic-sdk";
+import { cn } from "../lib/utils";
+import { Badge } from "../ui/badge";
+
+const STATUS_CIRCLE: Record<"completed" | "current" | "pending", string> = {
+  completed: "bg-primary text-primary-foreground",
+  current: "bg-primary/20 border border-primary",
+  pending: "bg-muted text-muted-foreground",
+};
+
+const STATUS_TITLE: Record<"completed" | "current" | "pending", string> = {
+  completed: "text-foreground",
+  current: "text-primary",
+  pending: "text-muted-foreground",
+};
+
+export function StepTimelineRenderer({ title, steps, orientation }: DisplaySteps) {
+  const isVertical = orientation !== "horizontal";
+
+  return (
+    <div className={cn("flex", isVertical ? "flex-col gap-0" : "flex-row items-start gap-0")}>
+      {title && (
+        <p className="text-sm font-medium text-foreground mb-3">{title}</p>
+      )}
+      {steps.map((step, index) => {
+        const isLast = index === steps.length - 1;
+        const { status } = step;
+
+        return (
+          <div
+            key={index}
+            className={cn(
+              "flex",
+              isVertical ? "flex-row gap-3" : "flex-col items-center gap-2 flex-1"
+            )}
+          >
+            {/* Circle + connector column */}
+            <div className={cn("flex", isVertical ? "flex-col items-center" : "flex-row items-center")}>
+              <div
+                className={cn(
+                  "w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                  STATUS_CIRCLE[status]
+                )}
+              >
+                <Badge
+                  variant="secondary"
+                  className="w-5 h-5 flex items-center justify-center rounded-full p-0 text-[10px] font-semibold border-0 bg-transparent text-inherit"
+                >
+                  {index + 1}
+                </Badge>
+              </div>
+              {!isLast && (
+                <div
+                  className={cn(
+                    isVertical ? "w-px h-6 bg-border" : "h-px w-full bg-border flex-1"
+                  )}
+                />
+              )}
+            </div>
+
+            {/* Content */}
+            <div className={cn("pb-4 flex-1 min-w-0", isLast && "pb-0", !isVertical && "text-center")}>
+              <p className={cn("text-sm font-medium leading-none", STATUS_TITLE[status])}>
+                {step.title}
+              </p>
+              {step.description && (
+                <p className="text-xs text-muted-foreground mt-1">{step.description}</p>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/display/index.ts

@@ -0,0 +1,21 @@
+export { AlertRenderer } from "./AlertRenderer.js";
+export { MetricCardRenderer } from "./MetricCardRenderer.js";
+export { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
+export { FileCardRenderer } from "./FileCardRenderer.js";
+export { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+export { SourcesListRenderer } from "./SourcesListRenderer.js";
+export { StepTimelineRenderer } from "./StepTimelineRenderer.js";
+export { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
+export { ChartRenderer } from "./ChartRenderer.js";
+export { CarouselRenderer } from "./CarouselRenderer.js";
+export { ProductCardRenderer } from "./ProductCardRenderer.js";
+export { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
+export { DataTableRenderer } from "./DataTableRenderer.js";
+export { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
+export { GalleryRenderer } from "./GalleryRenderer.js";
+export { ImageViewerRenderer } from "./ImageViewerRenderer.js";
+export { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
+export { MapViewRenderer } from "./MapViewRenderer.js";
+export { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
+export { defaultDisplayRenderers, resolveDisplayRenderer } from "./registry.js";
+export type { DisplayRendererMap, DisplayActionName } from "./registry.js";

package/src/display/registry.ts

@@ -0,0 +1,81 @@
+import type { ComponentType } from "react";
+
+import { AlertRenderer } from "./AlertRenderer.js";
+import { MetricCardRenderer } from "./MetricCardRenderer.js";
+import { PriceHighlightRenderer } from "./PriceHighlightRenderer.js";
+import { FileCardRenderer } from "./FileCardRenderer.js";
+import { CodeBlockRenderer } from "./CodeBlockRenderer.js";
+import { SourcesListRenderer } from "./SourcesListRenderer.js";
+import { StepTimelineRenderer } from "./StepTimelineRenderer.js";
+import { ProgressStepsRenderer } from "./ProgressStepsRenderer.js";
+import { ChartRenderer } from "./ChartRenderer.js";
+import { CarouselRenderer } from "./CarouselRenderer.js";
+import { ProductCardRenderer } from "./ProductCardRenderer.js";
+import { ComparisonTableRenderer } from "./ComparisonTableRenderer.js";
+import { DataTableRenderer } from "./DataTableRenderer.js";
+import { SpreadsheetRenderer } from "./SpreadsheetRenderer.js";
+import { GalleryRenderer } from "./GalleryRenderer.js";
+import { ImageViewerRenderer } from "./ImageViewerRenderer.js";
+import { LinkPreviewRenderer } from "./LinkPreviewRenderer.js";
+import { MapViewRenderer } from "./MapViewRenderer.js";
+import { ChoiceButtonsRenderer } from "./ChoiceButtonsRenderer.js";
+
+export type DisplayActionName =
+  | "metric"
+  | "price"
+  | "alert"
+  | "choices"
+  | "table"
+  | "spreadsheet"
+  | "comparison"
+  | "carousel"
+  | "gallery"
+  | "sources"
+  | "product"
+  | "link"
+  | "file"
+  | "image"
+  | "chart"
+  | "map"
+  | "code"
+  | "progress"
+  | "steps";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type DisplayRendererMap = Partial<Record<string, ComponentType<any>>>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const defaultDisplayRenderers: Record<DisplayActionName, ComponentType<any>> = {
+  // highlight
+  metric: MetricCardRenderer,
+  price: PriceHighlightRenderer,
+  alert: AlertRenderer,
+  choices: ChoiceButtonsRenderer,
+  // collection
+  table: DataTableRenderer,
+  spreadsheet: SpreadsheetRenderer,
+  comparison: ComparisonTableRenderer,
+  carousel: CarouselRenderer,
+  gallery: GalleryRenderer,
+  sources: SourcesListRenderer,
+  // card
+  product: ProductCardRenderer,
+  link: LinkPreviewRenderer,
+  file: FileCardRenderer,
+  image: ImageViewerRenderer,
+  // visual
+  chart: ChartRenderer,
+  map: MapViewRenderer,
+  code: CodeBlockRenderer,
+  progress: ProgressStepsRenderer,
+  steps: StepTimelineRenderer,
+};
+
+export function resolveDisplayRenderer(
+  action: string,
+  overrides?: DisplayRendererMap,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): ComponentType<any> | null {
+  if (overrides?.[action]) return overrides[action]!;
+  return (defaultDisplayRenderers as Record<string, ComponentType<any>>)[action] ?? null;
+}

package/src/hooks/ChatProvider.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useContext } from "react";
+import { useBackboneChat, type UseBackboneChatOptions } from "./useBackboneChat.js";
+
+type ChatContextValue = ReturnType<typeof useBackboneChat>;
+
+const ChatContext = createContext<ChatContextValue | null>(null);
+
+export interface ChatProviderProps extends Omit<UseBackboneChatOptions, "initialMessages"> {
+  initialMessages?: UseBackboneChatOptions["initialMessages"];
+  children: React.ReactNode;
+}
+
+export function ChatProvider({ endpoint, token, sessionId, initialMessages, children }: ChatProviderProps) {
+  const chat = useBackboneChat({ endpoint, token, sessionId, initialMessages });
+  return <ChatContext.Provider value={chat}>{children}</ChatContext.Provider>;
+}
+
+export function useChatContext(): ChatContextValue {
+  const ctx = useContext(ChatContext);
+  if (!ctx) throw new Error("useChatContext must be used within ChatProvider");
+  return ctx;
+}

package/src/hooks/useBackboneChat.ts

@@ -0,0 +1,148 @@
+import { useChat } from "@ai-sdk/react";
+import { useRef, useEffect, useState, useCallback } from "react";
+import type { Message } from "@ai-sdk/react";
+import type React from "react";
+
+export type { Message };
+
+const RESPONSE_TIMEOUT_MS = 30_000;
+
+export interface UseBackboneChatOptions {
+  endpoint: string;
+  token: string;
+  sessionId: string;
+  initialMessages?: Message[];
+  enableRichContent?: boolean;
+}
+
+export function useBackboneChat(options: UseBackboneChatOptions) {
+  const [syntheticError, setSyntheticError] = useState<Error | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevLoadingRef = useRef(false);
+  const pendingFilesRef = useRef<File[]>([]);
+
+  const clearTimer = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const rich = options.enableRichContent !== false;
+  const chat = useChat({
+    api: `${options.endpoint}/api/v1/ai/conversations/${options.sessionId}/messages?format=datastream${rich ? "&rich=true" : ""}`,
+    headers: { Authorization: `Bearer ${options.token}` },
+    initialMessages: options.initialMessages,
+    fetch: async (url: string | URL | Request, init?: RequestInit) => {
+      if (pendingFilesRef.current.length > 0) {
+        const files = pendingFilesRef.current;
+        pendingFilesRef.current = [];
+
+        const body = JSON.parse((init?.body as string) || "{}");
+        const messages: Array<{ role: string; content: unknown }> = body.messages ?? [];
+        const lastUserMsg = [...messages].reverse().find((m) => m.role === "user");
+        const messageText = typeof lastUserMsg?.content === "string" ? lastUserMsg.content : "";
+
+        const formData = new FormData();
+        if (messageText) formData.append("message", messageText);
+        for (const file of files) {
+          formData.append("files", file);
+        }
+
+        const initHeaders = new Headers((init?.headers ?? {}) as HeadersInit);
+        initHeaders.delete("Content-Type");
+
+        const res = await fetch(url, {
+          method: "POST",
+          headers: initHeaders,
+          body: formData,
+        });
+
+        if (!res.ok) {
+          let errorMsg = `Erro ${res.status}`;
+          try {
+            const text = await res.text();
+            if (text) errorMsg = text;
+          } catch { /* ignore */ }
+          throw new Error(errorMsg);
+        }
+
+        return res;
+      }
+      return fetch(url, init);
+    },
+    onError: () => {
+      clearTimer();
+      setIsUploading(false);
+      setSyntheticError(null);
+    },
+    onFinish: () => {
+      clearTimer();
+      setIsUploading(false);
+      setSyntheticError(null);
+    },
+  });
+
+  const buildAttachmentUrl = useCallback((ref: string) => {
+    const base = `${options.endpoint}/api/v1/ai/conversations/${options.sessionId}/attachments/${encodeURIComponent(ref)}`;
+    return options.token ? `${base}?token=${encodeURIComponent(options.token)}` : base;
+  }, [options.endpoint, options.sessionId, options.token]);
+
+  const { isLoading, messages, stop } = chat;
+
+  // --- Camada 2: timeout de resposta ---
+  // Inicia timer quando começa a carregar; reseta a cada chunk recebido
+  useEffect(() => {
+    if (isLoading) {
+      clearTimer();
+      timeoutRef.current = setTimeout(() => {
+        stop();
+        setSyntheticError(new Error("Tempo limite atingido. O servidor nao respondeu."));
+      }, RESPONSE_TIMEOUT_MS);
+    } else {
+      clearTimer();
+    }
+    return clearTimer;
+  }, [isLoading, stop, clearTimer]);
+
+  // Reset timeout quando mensagens mudam (dados chegando)
+  useEffect(() => {
+    if (isLoading && messages.length > 0) {
+      clearTimer();
+      timeoutRef.current = setTimeout(() => {
+        stop();
+        setSyntheticError(new Error("Tempo limite atingido. O servidor nao respondeu."));
+      }, RESPONSE_TIMEOUT_MS);
+    }
+  }, [messages, isLoading, stop, clearTimer]);
+
+  // --- Camada 3: deteccao de resposta vazia ---
+  useEffect(() => {
+    if (prevLoadingRef.current && !isLoading) {
+      const lastMessage = messages[messages.length - 1];
+      if (!chat.error && lastMessage?.role === "user") {
+        setSyntheticError(new Error("Nenhuma resposta recebida. Tente novamente."));
+      }
+    }
+    prevLoadingRef.current = isLoading;
+  }, [isLoading, messages, chat.error]);
+
+  const error = chat.error ?? syntheticError;
+
+  const handleSubmit = useCallback((e: React.FormEvent, attachments?: Array<{ file: File }>) => {
+    setSyntheticError(null);
+    if (attachments && attachments.length > 0) {
+      pendingFilesRef.current = attachments.map((a) => a.file);
+      setIsUploading(true);
+    }
+    return chat.handleSubmit(e as React.FormEvent<HTMLFormElement>);
+  }, [chat.handleSubmit]);
+
+  const reload = useCallback((...args: Parameters<typeof chat.reload>) => {
+    setSyntheticError(null);
+    return chat.reload(...args);
+  }, [chat.reload]);
+
+  return { ...chat, error, handleSubmit, reload, isUploading, buildAttachmentUrl };
+}

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+
+export function useIsMobile(breakpoint = 768): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [breakpoint]);
+
+  return isMobile;
+}