@wealthx/shadcn 1.3.2 → 1.3.3

package/src/components/ui/cash-balance-line-chart.tsx

@@ -12,17 +12,19 @@ import {
 } from "chart.js";
 import { Chart } from "react-chartjs-2";
 import { useThemeVars } from "@/lib/theme-provider";
-import { Card, CardContent, CardHeader, CardTitle } from "./card";
-import { Empty, EmptyDescription } from "./empty";
-import { Spinner } from "./spinner";
-import { cn } from "@/lib/utils";
 import {
   FALLBACK_TICK,
   FALLBACK_PRIMARY,
   FALLBACK_BG,
   ChartLegendItem,
   formatAbbrev,
+  formatChartDateLabel,
+  formatTooltipDate,
 } from "./chart-shared";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Spinner } from "./spinner";
+import { cn } from "@/lib/utils";
 import { formatCurrency } from "@/lib/format-currency";
 
 ChartJS.register(
@@ -38,20 +40,14 @@ ChartJS.register(
 // Helpers
 // ---------------------------------------------------------------------------
 
-/** Format ISO date string to "MMM dd" label e.g. "Jan 15" */
+/** Format ISO date string to "Jan 15" label — delegates to chart-shared. */
 function formatDateLabel(iso: string): string {
-  const d = new Date(iso);
-  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  return formatChartDateLabel(iso);
 }
 
-/** Format ISO date string for tooltip e.g. "Jan 15, 2024" */
+/** Format ISO date string for tooltip "Jan 15, 2024" — delegates to chart-shared. */
 function formatDateTooltip(iso: string): string {
-  const d = new Date(iso);
-  return d.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
+  return formatTooltipDate(iso, "daily");
 }
 
 // ---------------------------------------------------------------------------

package/src/components/ui/chart-shared.tsx

@@ -96,6 +96,16 @@ export const SEVERITY_COLORS = {
 import { formatCurrencyAbbrev as formatAbbrev } from "@/lib/format-currency";
 export { formatAbbrev };
 
+// ---------------------------------------------------------------------------
+// Chart date label — "Jan 15" for x-axis tick labels (daily charts)
+// ---------------------------------------------------------------------------
+
+/** Format an ISO date string as "Jan 15" for daily-chart x-axis labels. */
+export function formatChartDateLabel(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
 // ---------------------------------------------------------------------------
 // Tooltip date format
 // ---------------------------------------------------------------------------

package/src/components/ui/chat-widget-primitives.tsx

@@ -0,0 +1,336 @@
+import * as React from "react";
+import {
+  Bot,
+  UserRound,
+  MessageCircle,
+  X,
+  ChevronDown,
+  Send,
+  Smile,
+  Paperclip,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+/**
+ * ChatWidget Primitives — WealthX DS (Atoms)
+ *
+ * Atomic building blocks for the embeddable broker website chat widget.
+ * All atoms are pure display components — no API calls, no state beyond local UI.
+ *
+ * Exports:
+ *   ChatWidgetLauncher      — Floating action button (open/close)
+ *   ChatWidgetHeader        — Gradient branded header
+ *   ChatWidgetMessage       — Message bubble (bot | user | system)
+ *   ChatWidgetTypingIndicator — Animated 3-dot indicator
+ *   ChatWidgetInputBar      — Footer input with emoji/attachment/send
+ */
+
+// ---------------------------------------------------------------------------
+// ChatWidgetLauncher
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetLauncherProps {
+  /** Whether the chat window is currently open. */
+  isOpen: boolean;
+  onClick: () => void;
+  /** Primary brand color for the button background. Defaults to var(--primary). */
+  brandColor?: string;
+  /** Number of unread messages — shows a red badge when > 0 and chat is closed. */
+  unreadCount?: number;
+  className?: string;
+}
+
+export function ChatWidgetLauncher({
+  isOpen,
+  onClick,
+  brandColor,
+  unreadCount,
+  className,
+}: ChatWidgetLauncherProps) {
+  return (
+    <button
+      type="button"
+      aria-label={isOpen ? "Close chat" : "Open chat"}
+      onClick={onClick}
+      className={cn(
+        "relative flex size-14 items-center justify-center shadow-lg transition-all",
+        "rounded-full", // intentional: circular FAB shape
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        className,
+      )}
+      style={{ backgroundColor: brandColor ?? "var(--primary)" }}
+    >
+      {!isOpen && unreadCount && unreadCount > 0 ? (
+        <Badge
+          variant="destructive"
+          className="absolute -right-1 -top-1 size-5 justify-center bg-destructive px-0 py-0 text-[10px] font-semibold text-destructive-foreground"
+        >
+          {unreadCount > 9 ? "9+" : unreadCount}
+        </Badge>
+      ) : null}
+      {isOpen ? (
+        <X className="size-6 text-white" />
+      ) : (
+        <MessageCircle className="size-6 text-white" />
+      )}
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetHeader
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetHeaderProps {
+  brokerName: string;
+  subtitle?: string;
+  /** Gradient start color. */
+  gradientFrom?: string;
+  /** Gradient end color. */
+  gradientTo?: string;
+  onMinimize?: () => void;
+  className?: string;
+}
+
+export function ChatWidgetHeader({
+  brokerName,
+  subtitle = "Feel free to chat with us",
+  gradientFrom,
+  gradientTo,
+  onMinimize,
+  className,
+}: ChatWidgetHeaderProps) {
+  const hasGradient = gradientFrom && gradientTo;
+
+  return (
+    <div
+      className={cn(
+        "flex items-start justify-between px-4 py-3",
+        !hasGradient && "bg-primary",
+        className,
+      )}
+      style={
+        hasGradient
+          ? {
+              background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
+            }
+          : undefined
+      }
+    >
+      <div className="flex flex-col gap-0.5">
+        <p className="text-body-large font-semibold text-primary-foreground">
+          {brokerName}
+        </p>
+        {subtitle && (
+          <p className="text-body-small text-primary-foreground/70">
+            {subtitle}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center gap-1">
+        {onMinimize && (
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Minimize chat"
+            onClick={onMinimize}
+            className="text-primary-foreground/70 hover:bg-primary-foreground/10 hover:text-primary-foreground"
+          >
+            <ChevronDown className="size-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetMessage
+// ---------------------------------------------------------------------------
+
+export type ChatWidgetMessageRole = "bot" | "advisor" | "user" | "system";
+
+export interface ChatWidgetMessageProps {
+  role: ChatWidgetMessageRole;
+  content: string;
+  timestamp?: string;
+  /** True while the bot response is still streaming in — shows TypingIndicator instead. */
+  isStreaming?: boolean;
+  className?: string;
+}
+
+export function ChatWidgetMessage({
+  role,
+  content,
+  timestamp,
+  isStreaming,
+  className,
+}: ChatWidgetMessageProps) {
+  if (role === "system") {
+    return (
+      <div className={cn("flex items-center justify-center py-2", className)}>
+        <span className="text-body-small text-muted-foreground">{content}</span>
+      </div>
+    );
+  }
+
+  const isLeft = role === "bot" || role === "advisor";
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2",
+        isLeft ? "items-start" : "flex-row-reverse items-start",
+        className,
+      )}
+    >
+      {isLeft && (
+        <Avatar className="size-7">
+          <AvatarFallback
+            className={
+              role === "advisor" ? "bg-primary/15 text-foreground" : undefined
+            }
+          >
+            {role === "advisor" ? (
+              <UserRound className="size-3.5" />
+            ) : (
+              <Bot className="size-3.5" />
+            )}
+          </AvatarFallback>
+        </Avatar>
+      )}
+      <div
+        className={cn(
+          "flex max-w-[80%] flex-col gap-1",
+          !isLeft && "items-end",
+        )}
+      >
+        <div
+          className={cn(
+            "px-3 py-2 text-body-medium",
+            isLeft
+              ? "border border-border bg-card text-card-foreground shadow-sm"
+              : "text-primary-foreground",
+          )}
+          style={!isLeft ? { backgroundColor: "var(--primary)" } : undefined}
+        >
+          {isStreaming ? <ChatWidgetTypingIndicator /> : content}
+        </div>
+        {timestamp && !isStreaming && (
+          <span className="text-[10px] text-muted-foreground">{timestamp}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetTypingIndicator
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetTypingIndicatorProps {
+  className?: string;
+}
+
+export function ChatWidgetTypingIndicator({
+  className,
+}: ChatWidgetTypingIndicatorProps) {
+  return (
+    <div
+      role="status"
+      aria-label="Typing"
+      className={cn("flex items-center gap-1 py-0.5", className)}
+    >
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60"
+          style={{ animationDelay: `${i * 0.15}s` }}
+          aria-hidden="true"
+        />
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetInputBar
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetInputBarProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export function ChatWidgetInputBar({
+  value,
+  onChange,
+  onSend,
+  disabled,
+  placeholder = "Type your message here",
+  className,
+}: ChatWidgetInputBarProps) {
+  const hasText = value.trim().length > 0;
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey && hasText && !disabled) {
+      e.preventDefault();
+      onSend(value);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 border-t border-border bg-muted/30 px-3 py-2.5",
+        className,
+      )}
+    >
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Add emoji"
+        disabled={disabled}
+        className="shrink-0 text-muted-foreground hover:text-foreground"
+      >
+        <Smile className="size-5" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Add attachment"
+        disabled={disabled}
+        className="shrink-0 text-muted-foreground hover:text-foreground"
+      >
+        <Paperclip className="size-5" />
+      </Button>
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="flex-1 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0 text-body-medium placeholder:text-muted-foreground/60"
+      />
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Send message"
+        disabled={disabled || !hasText}
+        onClick={() => hasText && !disabled && onSend(value)}
+        className="shrink-0"
+      >
+        <Send className="size-4" />
+      </Button>
+    </div>
+  );
+}