@usereq/widget 0.1.0

package/src/chat-widget/components/confirmation.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { CheckCircle2, XCircle } from "lucide-react";
+import { Button } from "@usereq/ui/components/button";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@usereq/ui/components/alert";
+import { cn } from "@usereq/ui/lib/utils";
+import type {
+  StopConfirmationDecision,
+  StopConfirmationState,
+} from "../stop-confirmation";
+
+type ConfirmationContextValue = {
+  state: StopConfirmationState;
+  approvalId?: string;
+};
+
+const ConfirmationContext =
+  React.createContext<ConfirmationContextValue | null>(null);
+
+function useConfirmationContext() {
+  const context = React.useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error("Confirmation components must be used within <Confirmation />");
+  }
+  return context;
+}
+
+export type ConfirmationProps = {
+  approval?: { id: string };
+  state?: StopConfirmationState;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function Confirmation({
+  approval,
+  state = "pending",
+  className,
+  children,
+}: ConfirmationProps): React.ReactElement {
+  return (
+    <Alert className={cn("gap-2 rounded-2xl border-border/70", className)}>
+      <ConfirmationContext.Provider
+        value={{ state, approvalId: approval?.id }}
+      >
+        {children}
+      </ConfirmationContext.Provider>
+    </Alert>
+  );
+}
+
+export function ConfirmationTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertTitle>): React.ReactElement {
+  return (
+    <AlertTitle className={cn("text-sm font-semibold", className)} {...props} />
+  );
+}
+
+export function ConfirmationRequest({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDescription>): React.ReactElement | null {
+  const { state } = useConfirmationContext();
+  if (state !== "pending") {
+    return null;
+  }
+
+  return (
+    <AlertDescription
+      className={cn("text-sm leading-relaxed", className)}
+      {...props}
+    />
+  );
+}
+
+export function ConfirmationAccepted({
+  className,
+  children,
+}: React.ComponentProps<"div">): React.ReactElement | null {
+  const { state } = useConfirmationContext();
+  if (state !== "accepted") {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 text-sm font-medium text-emerald-600 dark:text-emerald-400",
+        className,
+      )}
+    >
+      <CheckCircle2 className="size-4 shrink-0" />
+      <span>{children ?? "Conversation stopped."}</span>
+    </div>
+  );
+}
+
+export function ConfirmationRejected({
+  className,
+  children,
+}: React.ComponentProps<"div">): React.ReactElement | null {
+  const { state } = useConfirmationContext();
+  if (state !== "rejected") {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 text-sm font-medium text-rose-600 dark:text-rose-400",
+        className,
+      )}
+    >
+      <XCircle className="size-4 shrink-0" />
+      <span>{children ?? "Conversation continues."}</span>
+    </div>
+  );
+}
+
+export function ConfirmationActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement | null {
+  const { state } = useConfirmationContext();
+  if (state !== "pending") {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("flex w-full flex-wrap justify-end gap-2 pt-1", className)}
+      {...props}
+    />
+  );
+}
+
+export function ConfirmationAction({
+  children,
+  ...props
+}: React.ComponentProps<typeof Button>): React.ReactElement {
+  return (
+    <Button {...props}>
+      {typeof children === "string" ? children : children}
+    </Button>
+  );
+}
+
+export type ConfirmationDecision = StopConfirmationDecision;

package/src/chat-widget/components/conversation.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@usereq/ui/components/button";
+import { cn } from "@usereq/ui/lib/utils";
+import { ArrowDown } from "lucide-react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationProps = React.ComponentProps<typeof StickToBottom>;
+
+export function Conversation({
+  className,
+  ...props
+}: ConversationProps): React.ReactElement {
+  return (
+    <StickToBottom
+      className={cn("relative size-full overflow-y-hidden", className)}
+      initial="instant"
+      resize="smooth"
+      role="log"
+      {...props}
+    />
+  );
+}
+
+export type ConversationContentProps = React.ComponentProps<
+  typeof StickToBottom.Content
+>;
+
+export function ConversationContent({
+  className,
+  children,
+  ...props
+}: ConversationContentProps): React.ReactElement {
+  return (
+    <StickToBottom.Content
+      className={cn("flex min-h-full flex-1 flex-col gap-2 p-0", className)}
+      {...props}
+    >
+      {children}
+    </StickToBottom.Content>
+  );
+}
+
+export type ConversationEmptyStateProps = React.ComponentProps<"div"> & {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+};
+
+export function ConversationEmptyState({
+  icon,
+  title,
+  description,
+  className,
+  children,
+  ...props
+}: ConversationEmptyStateProps): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 text-center",
+        className,
+      )}
+      {...props}
+    >
+      {icon ? <div className="text-muted-foreground">{icon}</div> : null}
+      {title ? (
+        <p className="text-lg font-semibold leading-tight text-foreground">
+          {title}
+        </p>
+      ) : null}
+      {description ? (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+export type ConversationScrollButtonProps = React.ComponentProps<typeof Button>;
+
+export function ConversationScrollButton({
+  className,
+  children,
+  ...props
+}: ConversationScrollButtonProps): React.ReactElement | null {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  if (isAtBottom) {
+    return null;
+  }
+
+  return (
+    <Button
+      type="button"
+      size="icon"
+      variant="outline"
+      className={cn(
+        "absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full shadow-lg",
+        className,
+      )}
+      onClick={() => scrollToBottom()}
+      aria-label="Scroll to bottom"
+      {...props}
+    >
+      {children ?? <ArrowDown className="size-4" />}
+    </Button>
+  );
+}

package/src/chat-widget/components/message.tsx

@@ -0,0 +1,325 @@
+"use client";
+
+import * as React from "react";
+import { motion } from "motion/react";
+import { cn } from "@usereq/ui/lib/utils";
+import { mermaid } from "@streamdown/mermaid";
+import { Streamdown } from "streamdown";
+import "streamdown/styles.css";
+import {
+  Confirmation,
+  ConfirmationAccepted,
+  ConfirmationAction,
+  ConfirmationActions,
+  ConfirmationRejected,
+  ConfirmationRequest,
+  ConfirmationTitle,
+} from "./confirmation";
+import {
+  DEFAULT_STOP_CONVERSATION_PROMPT,
+  parseStopConfirmationEnvelope,
+  STOP_CONFIRMATION_KIND,
+  type StopConfirmationEnvelope,
+} from "../stop-confirmation";
+
+export type MessageRole = "assistant" | "user" | "system";
+
+export interface MessageProps {
+  children?: React.ReactNode;
+  from?: MessageRole;
+  role?: MessageRole;
+  className?: string;
+}
+
+export function Message({
+  children,
+  from,
+  role,
+  className,
+}: MessageProps): React.ReactElement {
+  const resolvedRole = from ?? role ?? "assistant";
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+      className={cn(
+        "w-full flex",
+        resolvedRole === "user" ? "justify-end" : "justify-start",
+        className,
+      )}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function MessageContent({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+type StreamdownProps = React.ComponentProps<typeof Streamdown>;
+
+export type MessageResponseProps = Omit<StreamdownProps, "children"> & {
+  className?: string;
+  children?: string;
+  onLinkClick?: (linkUrl: string) => void;
+  confirmation?: StopConfirmationEnvelope | null;
+  confirmationPrompt?: string;
+  confirmationActionsDisabled?: boolean;
+  onConfirmationDecision?: (
+    confirmationId: string,
+    accepted: boolean,
+  ) => void | Promise<void>;
+};
+
+export function MessageResponse({
+  children = "",
+  className,
+  onLinkClick,
+  plugins,
+  mode = "static",
+  linkSafety: linkSafetyProp,
+  confirmation,
+  confirmationPrompt,
+  confirmationActionsDisabled,
+  onConfirmationDecision,
+  ...props
+}: MessageResponseProps): React.ReactElement {
+  const parsedConfirmation =
+    confirmation ?? parseStopConfirmationEnvelope(children);
+
+  if (parsedConfirmation) {
+    const confirmationId = parsedConfirmation.confirmationId;
+    const state =
+      parsedConfirmation.kind === STOP_CONFIRMATION_KIND
+        ? parsedConfirmation.state
+        : parsedConfirmation.decision === "accepted"
+          ? "accepted"
+          : "rejected";
+    const prompt =
+      confirmationPrompt ??
+      (parsedConfirmation.kind === STOP_CONFIRMATION_KIND
+        ? parsedConfirmation.prompt
+        : DEFAULT_STOP_CONVERSATION_PROMPT);
+
+    return (
+      <Confirmation
+        approval={{ id: confirmationId }}
+        state={state}
+        className={cn("w-full", className)}
+      >
+        <ConfirmationTitle>Stop conversation</ConfirmationTitle>
+        {state === "pending" && <ConfirmationRequest>{prompt}</ConfirmationRequest>}
+        {state === "accepted" && (
+          <ConfirmationAccepted>Conversation stopped.</ConfirmationAccepted>
+        )}
+        {state === "rejected" && (
+          <ConfirmationRejected>Conversation continues.</ConfirmationRejected>
+        )}
+        {state === "pending" && onConfirmationDecision && (
+          <ConfirmationActions className="pt-2">
+            <ConfirmationAction
+              variant="outline"
+              disabled={confirmationActionsDisabled}
+              onClick={() => void onConfirmationDecision(confirmationId, false)}
+            >
+              No
+            </ConfirmationAction>
+            <ConfirmationAction
+              variant="default"
+              disabled={confirmationActionsDisabled}
+              onClick={() => void onConfirmationDecision(confirmationId, true)}
+            >
+              Yes
+            </ConfirmationAction>
+          </ConfirmationActions>
+        )}
+      </Confirmation>
+    );
+  }
+
+  const lastTrackedLinkRef = React.useRef<{
+    href: string;
+    at: number;
+  } | null>(null);
+
+  const emitLinkClick = React.useCallback(
+    (href: string | null | undefined) => {
+      const normalizedHref = href?.trim();
+      if (!normalizedHref) return;
+
+      const now = Date.now();
+      const lastTrackedLink = lastTrackedLinkRef.current;
+      if (
+        lastTrackedLink &&
+        lastTrackedLink.href === normalizedHref &&
+        now - lastTrackedLink.at < 250
+      ) {
+        return;
+      }
+
+      lastTrackedLinkRef.current = {
+        href: normalizedHref,
+        at: now,
+      };
+      onLinkClick?.(normalizedHref);
+    },
+    [onLinkClick],
+  );
+
+  const resolveAnchorFromTarget = React.useCallback((target: EventTarget | null) => {
+    if (target instanceof HTMLAnchorElement) {
+      return target;
+    }
+
+    if (target instanceof Element) {
+      const anchor = target.closest("a[href]");
+      return anchor instanceof HTMLAnchorElement ? anchor : null;
+    }
+
+    if (target instanceof Node) {
+      const anchor = target.parentElement?.closest("a[href]");
+      return anchor instanceof HTMLAnchorElement ? anchor : null;
+    }
+
+    return null;
+  }, []);
+
+  const handleClickCapture = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!onLinkClick) return;
+      const composedPath = event.nativeEvent.composedPath?.() ?? [];
+      const pathAnchor = composedPath.find(
+        (entry) =>
+          entry instanceof HTMLAnchorElement && entry.href?.trim().length > 0,
+      );
+      const anchor =
+        (pathAnchor instanceof HTMLAnchorElement ? pathAnchor : null) ??
+        resolveAnchorFromTarget(event.target);
+      if (!anchor) return;
+      emitLinkClick(anchor.href);
+    },
+    [emitLinkClick, onLinkClick, resolveAnchorFromTarget],
+  );
+
+  const handleLinkSafetyCheck = React.useCallback(
+    async (url: string): Promise<boolean> => {
+      const href = url?.trim();
+      if (linkSafetyProp?.onLinkCheck) {
+        const shouldOpenDirectly = await linkSafetyProp.onLinkCheck(url);
+        if (!shouldOpenDirectly && href) {
+          emitLinkClick(href);
+        }
+        return shouldOpenDirectly;
+      }
+
+      if (href) {
+        emitLinkClick(href);
+      }
+      return false;
+    },
+    [emitLinkClick, linkSafetyProp],
+  );
+
+  const resolvedLinkSafety = React.useMemo(() => {
+    if (!onLinkClick) {
+      return linkSafetyProp;
+    }
+
+    if (linkSafetyProp?.enabled === false) {
+      return linkSafetyProp;
+    }
+
+    return {
+      ...(linkSafetyProp ?? {}),
+      enabled: linkSafetyProp?.enabled ?? true,
+      onLinkCheck: handleLinkSafetyCheck,
+    };
+  }, [handleLinkSafetyCheck, linkSafetyProp, onLinkClick]);
+
+  return (
+    <div onClickCapture={handleClickCapture}>
+      <Streamdown
+        {...props}
+        mode={mode}
+        linkSafety={resolvedLinkSafety}
+        plugins={{ mermaid, ...plugins }}
+        className={cn(
+          "text-sm leading-relaxed whitespace-normal",
+          // "[&_[data-streamdown='table-wrapper']]:my-0",
+          // "[&_[data-streamdown='table-wrapper']]:w-fit",
+          // "[&_[data-streamdown='table-wrapper']]:max-w-full",
+          // "[&_[data-streamdown='table-wrapper']]:gap-1",
+          // "[&_[data-streamdown='table-wrapper']]:p-1",
+          // "[&_[data-streamdown='table-wrapper']]:rounded-xl",
+          className,
+        )}
+      >
+        {children}
+      </Streamdown>
+    </div>
+  );
+}
+
+export type AssistantMessageRevealSource = {
+  id: string;
+  content: string;
+};
+
+export type AssistantMessageRevealStep<
+  T extends AssistantMessageRevealSource = AssistantMessageRevealSource,
+> = {
+  message: T;
+  delayMs: number;
+};
+
+export function buildAssistantMessageRevealSteps<
+  T extends AssistantMessageRevealSource,
+>(
+  messages: T[],
+  options?: {
+    initialDelayMs?: number;
+    typingHoldMs?: number;
+    interMessageDelayMs?: number;
+    interMessageDelayJitterMs?: number;
+  },
+): AssistantMessageRevealStep<T>[] {
+  if (messages.length === 0) {
+    return [];
+  }
+
+  const initialDelayMs = options?.initialDelayMs ?? 0;
+  const typingHoldMs = options?.typingHoldMs ?? 1260;
+  const interMessageDelayMs = options?.interMessageDelayMs ?? 1520;
+  const jitterMs = Math.max(0, options?.interMessageDelayJitterMs ?? 100);
+
+  return messages.map((message, index) => {
+    const baseDelay =
+      index === 0 ? initialDelayMs + typingHoldMs : interMessageDelayMs;
+    const jitter =
+      index === 0 || jitterMs === 0
+        ? 0
+        : Math.round((Math.random() * 2 - 1) * jitterMs);
+
+    return {
+      message,
+      delayMs: Math.max(0, baseDelay + jitter),
+    };
+  });
+}

package/src/chat-widget/index.ts

@@ -0,0 +1,9 @@
+export * from "./components/chat-widget-frame";
+export * from "./components/chat-widget-primitives";
+export * from "./components/confirmation";
+export * from "./components/conversation";
+export * from "./components/message";
+export * from "./stop-confirmation";
+export * from "./styles/chat-widget-bubble";
+export * from "./styles/chat-widget-box";
+export * from "./styles/chat-widget-chatbar";