@wealthx/shadcn 1.5.39 → 1.5.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.39",
+  "version": "1.5.41",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/ui/chat-input-area.tsx

@@ -1,5 +1,15 @@
 import * as React from "react";
-import { ImagePlus, Paperclip, Send } from "lucide-react";
+import { flushSync } from "react-dom";
+import {
+  Bold,
+  Code,
+  Code2,
+  ImagePlus,
+  Italic,
+  type LucideIcon,
+  Paperclip,
+  Send,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -14,6 +24,7 @@ import { Textarea } from "@/components/ui/textarea";
  * Features:
  * - Textarea with auto-resize up to `maxHeight`
  * - Enter to send / Shift+Enter for new line
+ * - Optional markdown formatting toolbar (`showMarkdownToolbar`)
  * - Optional file attachment (Paperclip) — shown only when `onAttachFile` is provided
  * - Optional image upload (ImagePlus) — shown only when `onAttachImage` is provided
  * - Focus ring on outer container via `focus-within`
@@ -26,6 +37,7 @@ import { Textarea } from "@/components/ui/textarea";
  *   onSend={handleSend}
  *   onAttachFile={handleFiles}
  *   onAttachImage={handleImages}
+ *   showMarkdownToolbar
  *   placeholder="Ask anything…"
  * />
  */
@@ -66,11 +78,168 @@ export interface ChatInputAreaProps {
   maxHeight?: number;
   /** Focus the textarea on mount. */
   autoFocus?: boolean;
+  /**
+   * Show a markdown formatting toolbar (Bold, Italic, Code, Code block)
+   * above the textarea. Wraps selected text or inserts a placeholder.
+   * @default false
+   */
+  showMarkdownToolbar?: boolean;
   className?: string;
 }
 
 const DEFAULT_HINT = "Enter to send · Shift+Enter for new line";
 
+// ---------------------------------------------------------------------------
+// Markdown toolbar
+// ---------------------------------------------------------------------------
+
+type ToolbarItem =
+  | {
+      type: "button";
+      icon: LucideIcon;
+      label: string;
+      title: string;
+      before: string;
+      after: string;
+      placeholder: string;
+    }
+  | { type: "divider" };
+
+/** Static config — defined once, no per-render allocation. */
+const TOOLBAR_ITEMS: ToolbarItem[] = [
+  {
+    type: "button",
+    icon: Bold,
+    label: "Bold",
+    title: "Bold (Ctrl+B)",
+    before: "**",
+    after: "**",
+    placeholder: "bold text",
+  },
+  {
+    type: "button",
+    icon: Italic,
+    label: "Italic",
+    title: "Italic (Ctrl+I)",
+    before: "*",
+    after: "*",
+    placeholder: "italic text",
+  },
+  {
+    type: "button",
+    icon: Code,
+    label: "Inline code",
+    title: "Inline code",
+    before: "`",
+    after: "`",
+    placeholder: "code",
+  },
+  { type: "divider" },
+  {
+    type: "button",
+    icon: Code2,
+    label: "Code block",
+    title: "Code block",
+    before: "```\n",
+    after: "\n```",
+    placeholder: "code block",
+  },
+];
+
+/**
+ * Wraps the current selection (or inserts a placeholder) with markdown syntax.
+ * Uses flushSync so the selection can be restored synchronously after the
+ * controlled value update — no setTimeout timing hack needed.
+ */
+function applyMarkdown(
+  textarea: HTMLTextAreaElement,
+  before: string,
+  after: string,
+  placeholder: string,
+  onChange: (value: string) => void,
+) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const selected = textarea.value.slice(start, end);
+  const insertion = selected || placeholder;
+  const next =
+    textarea.value.slice(0, start) +
+    before +
+    insertion +
+    after +
+    textarea.value.slice(end);
+
+  const newStart = start + before.length;
+  const newEnd = newStart + insertion.length;
+
+  // flushSync forces React to flush the state update synchronously so we can
+  // restore selection immediately — React-blessed alternative to setTimeout.
+  flushSync(() => onChange(next));
+  textarea.focus();
+  textarea.setSelectionRange(newStart, newEnd);
+}
+
+interface MarkdownToolbarProps {
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+/** Memoised — does not re-render on every parent keystroke. */
+const MarkdownToolbar = React.memo(function MarkdownToolbar({
+  textareaRef,
+  onChange,
+  disabled,
+}: MarkdownToolbarProps) {
+  // Single stable handler — reads format tokens from data attributes.
+  const handleFormat = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (!textareaRef.current) return;
+      const { before, after, placeholder } = e.currentTarget.dataset as {
+        before: string;
+        after: string;
+        placeholder: string;
+      };
+      applyMarkdown(textareaRef.current, before, after, placeholder, onChange);
+    },
+    [textareaRef, onChange],
+  );
+
+  return (
+    <div className="flex items-center gap-0.5 border-b border-border px-2 py-1">
+      {TOOLBAR_ITEMS.map((item, i) =>
+        item.type === "divider" ? (
+          <span
+            key={i}
+            className="mx-0.5 h-3.5 w-px bg-border"
+            aria-hidden="true"
+          />
+        ) : (
+          <Button
+            key={item.label}
+            variant="ghost"
+            size="icon-sm"
+            type="button"
+            title={item.title}
+            aria-label={item.label}
+            disabled={disabled}
+            data-before={item.before}
+            data-after={item.after}
+            data-placeholder={item.placeholder}
+            onClick={handleFormat}
+          >
+            <item.icon className="size-3.5" aria-hidden="true" />
+          </Button>
+        ),
+      )}
+    </div>
+  );
+});
+
+// ---------------------------------------------------------------------------
+// ChatInputArea
+// ---------------------------------------------------------------------------
+
 export function ChatInputArea({
   value,
   onChange,
@@ -82,6 +251,7 @@ export function ChatInputArea({
   hint = DEFAULT_HINT,
   maxHeight = 160,
   autoFocus = false,
+  showMarkdownToolbar = false,
   className,
 }: ChatInputAreaProps) {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
@@ -154,8 +324,17 @@ export function ChatInputArea({
       data-slot="chat-input-area"
       className={cn("flex flex-col gap-1.5", className)}
     >
-      {/* Unified input box — textarea + action bar share one border */}
+      {/* Unified input box — toolbar + textarea + action bar share one border */}
       <div className="border border-border bg-background flex flex-col focus-within:ring-1 focus-within:ring-ring">
+        {/* Markdown toolbar — optional, shown at top of the input box */}
+        {showMarkdownToolbar && (
+          <MarkdownToolbar
+            textareaRef={textareaRef}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        )}
+
         <Textarea
           ref={textareaRef}
           value={value}

package/src/components/ui/policy-ai/index.tsx

@@ -39,3 +39,15 @@ export type {
 export { PolicyAIFAB, PolicyAIPanel } from "./policy-ai-panel";
 
 export type { PolicyAIFABProps, PolicyAIPanelProps } from "./policy-ai-panel";
+
+export { PolicyAIHistoryPanel } from "./policy-ai-history-panel";
+
+export type { PolicyAIHistoryPanelProps } from "./policy-ai-history-panel";
+
+export { PolicyAIContextSidebar } from "./policy-ai-context-sidebar";
+
+export type { PolicyAIContextSidebarProps } from "./policy-ai-context-sidebar";
+
+export { PolicyAIPage } from "./policy-ai-page";
+
+export type { PolicyAIPageProps } from "./policy-ai-page";

package/src/components/ui/policy-ai/policy-ai-context-sidebar.tsx

@@ -0,0 +1,231 @@
+import * as React from "react";
+import { type LucideIcon, BrainCircuit, Database, Layers } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import type {
+  PolicyQueryContext,
+  PolicyQueryType,
+} from "./policy-ai-primitives";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface PolicyAIContextSidebarProps {
+  /** Context detected from the most recent query (absent in home state). */
+  lastQueryContext?: PolicyQueryContext;
+  /** Follow-up question suggestions shown below the query context. */
+  suggestedFollowUps?: string[];
+  /** Called when user clicks a suggested follow-up question. */
+  onFollowUpClick?: (question: string) => void;
+  /** Number of banks indexed. Defaults to 42. */
+  bankCount?: number;
+  /** Number of policy categories indexed. Defaults to 86. */
+  categoryCount?: number;
+  /** Human-readable date of last policy update. */
+  lastUpdated?: string;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+const QUERY_TYPE_DESCRIPTIONS: Record<PolicyQueryType, string> = {
+  single_bank: "Answered from a single bank's policy documents.",
+  cross_bank_comparison: "Compared across all indexed banks simultaneously.",
+  threshold_filter: "Filtered banks against a specific threshold or limit.",
+  ranking: "Ranked banks using TOPSIS multi-criteria scoring.",
+  scenario_match: "Matched your scenario against all bank lending criteria.",
+  general: "General policy question answered from the knowledge base.",
+};
+
+const QUERY_TYPE_LABELS: Record<PolicyQueryType, string> = {
+  single_bank: "Single bank",
+  cross_bank_comparison: "Cross-bank",
+  threshold_filter: "Threshold filter",
+  ranking: "Ranked list",
+  scenario_match: "Scenario match",
+  general: "General",
+};
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+function SidebarSection({
+  title,
+  children,
+  className,
+}: {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      <p className="text-overline text-muted-foreground px-3">{title}</p>
+      {children}
+    </div>
+  );
+}
+
+function StatRow({
+  icon: Icon,
+  children,
+}: {
+  icon: LucideIcon;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-2.5">
+      <Icon
+        className="size-3.5 text-muted-foreground shrink-0"
+        aria-hidden="true"
+      />
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIContextSidebar (Organism)
+// ---------------------------------------------------------------------------
+
+/**
+ * Right sidebar for the Policy AI dedicated page.
+ * Displays:
+ * - Coverage stats (banks + categories indexed)
+ * - Last query context as a source reference card
+ * - Suggested follow-up questions
+ *
+ * @example
+ * <PolicyAIContextSidebar
+ *   lastQueryContext={lastMessage?.queryContext}
+ *   suggestedFollowUps={["What about NAB?", "Show me ranked list"]}
+ *   onFollowUpClick={handleSend}
+ * />
+ */
+export function PolicyAIContextSidebar({
+  lastQueryContext,
+  suggestedFollowUps,
+  onFollowUpClick,
+  bankCount = 42,
+  categoryCount = 86,
+  lastUpdated = "June 2026",
+  className,
+}: PolicyAIContextSidebarProps) {
+  return (
+    <div
+      data-slot="policy-ai-context-sidebar"
+      className={cn(
+        "flex flex-col h-full border-l border-border bg-card shrink-0 overflow-y-auto",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-5 px-0 py-4">
+        {/* ── Coverage stats ── */}
+        <SidebarSection title="Coverage">
+          <div className="flex flex-col gap-1.5 px-3">
+            <StatRow icon={BrainCircuit}>
+              <span className="text-sm text-foreground">
+                <span className="font-semibold">{bankCount}</span> banks indexed
+              </span>
+            </StatRow>
+            <StatRow icon={Layers}>
+              <span className="text-sm text-foreground">
+                <span className="font-semibold">{categoryCount}</span> policy
+                categories
+              </span>
+            </StatRow>
+            <StatRow icon={Database}>
+              <span className="text-caption text-muted-foreground">
+                Updated {lastUpdated}
+              </span>
+            </StatRow>
+          </div>
+        </SidebarSection>
+
+        {/* ── Last query context — source reference card ── */}
+        {lastQueryContext && (
+          <>
+            <Separator />
+            <SidebarSection title="Last Query">
+              {/*
+               * Styled as a "source" card — three zones:
+               *   Header  → policy type + query type badge
+               *   Body    → bank name + category badges
+               *   Footer  → one-line method description
+               */}
+              <Card className="gap-0 py-0 shadow-none overflow-hidden mx-3">
+                {/* Header */}
+                <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border bg-muted/30">
+                  <span className="text-sm font-semibold text-foreground">
+                    {lastQueryContext.policyType}
+                  </span>
+                  <Badge variant="outline" className="text-xs shrink-0">
+                    {QUERY_TYPE_LABELS[lastQueryContext.queryType]}
+                  </Badge>
+                </div>
+
+                {/* Body */}
+                <div className="flex flex-col gap-2 px-3 py-2.5">
+                  {lastQueryContext.bankName && (
+                    <p className="text-sm font-semibold text-foreground leading-none">
+                      {lastQueryContext.bankName}
+                    </p>
+                  )}
+                  {lastQueryContext.categories.length > 0 && (
+                    <div className="flex flex-wrap gap-1">
+                      {lastQueryContext.categories.map((cat) => (
+                        <Badge
+                          key={cat}
+                          variant="secondary"
+                          className="text-xs font-normal"
+                        >
+                          {cat}
+                        </Badge>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Footer — method description */}
+                <div className="border-t border-border px-3 py-2">
+                  <p className="text-caption text-muted-foreground leading-snug">
+                    {QUERY_TYPE_DESCRIPTIONS[lastQueryContext.queryType]}
+                  </p>
+                </div>
+              </Card>
+            </SidebarSection>
+          </>
+        )}
+
+        {/* ── Suggested follow-ups ── */}
+        {!!suggestedFollowUps?.length && (
+          <>
+            <Separator />
+            <SidebarSection title="Follow-ups">
+              <div className="flex flex-col gap-1 px-3">
+                {suggestedFollowUps.map((q) => (
+                  <Button
+                    key={q}
+                    variant="outline"
+                    size="sm"
+                    className="w-full justify-start h-auto py-1.5 text-muted-foreground font-normal leading-snug whitespace-normal text-left"
+                    onClick={() => onFollowUpClick?.(q)}
+                  >
+                    {q}
+                  </Button>
+                ))}
+              </div>
+            </SidebarSection>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/policy-ai/policy-ai-history-panel.tsx

@@ -0,0 +1,175 @@
+import * as React from "react";
+import { BrainCircuit, MessageSquarePlus, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { PolicyConversationItem } from "./policy-ai-primitives";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface PolicyAIHistoryPanelProps {
+  conversations: PolicyConversationItem[];
+  activeId?: string;
+  onSelect?: (id: string) => void;
+  onNewChat?: () => void;
+  searchQuery?: string;
+  onSearchChange?: (q: string) => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIHistoryItem — mirrors ConversationListItem visual pattern
+// ---------------------------------------------------------------------------
+
+function PolicyAIHistoryItem({
+  conv,
+  isActive,
+  onClick,
+}: {
+  conv: PolicyConversationItem;
+  isActive: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "w-full flex items-start gap-3 px-3 py-3 text-left transition-colors",
+        "border-b border-border last:border-b-0",
+        isActive ? "bg-muted" : "hover:bg-muted/40",
+      )}
+    >
+      <div className="min-w-0 flex-1">
+        {/* Row 1 — query title + timestamp (mirrors ConversationListItem row 1) */}
+        <div className="flex items-start justify-between gap-2">
+          <span
+            className={cn(
+              "text-sm leading-snug line-clamp-2 min-w-0",
+              isActive ? "font-semibold text-foreground" : "text-foreground",
+            )}
+          >
+            {conv.title}
+          </span>
+          {conv.timestamp && (
+            <span className="shrink-0 text-caption text-muted-foreground whitespace-nowrap">
+              {conv.timestamp}
+            </span>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIHistoryPanel (Organism)
+// ---------------------------------------------------------------------------
+
+/**
+ * Left sidebar for the Policy AI dedicated page.
+ * Visual pattern mirrors ConversationList + ConversationListItem:
+ * - Header bar with "New Chat" button
+ * - Search input (same style as ConversationList)
+ * - List of Policy AI sessions using avatar + title + timestamp layout
+ *
+ * @example
+ * <PolicyAIHistoryPanel
+ *   conversations={conversations}
+ *   activeId={activeId}
+ *   onSelect={setActiveId}
+ *   onNewChat={() => setMessages([])}
+ * />
+ */
+export function PolicyAIHistoryPanel({
+  conversations,
+  activeId,
+  onSelect,
+  onNewChat,
+  searchQuery = "",
+  onSearchChange,
+  className,
+}: PolicyAIHistoryPanelProps) {
+  const filtered = searchQuery
+    ? conversations.filter((c) =>
+        c.title.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : conversations;
+
+  return (
+    <div
+      data-slot="policy-ai-history-panel"
+      className={cn(
+        "flex flex-col h-full border-r border-border bg-background shrink-0",
+        className,
+      )}
+    >
+      {/* ── Header — New Chat + Search (mirrors ConversationList header) ── */}
+      <div className="shrink-0 flex flex-col">
+        {/* New chat */}
+        <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
+          <Button
+            size="sm"
+            className="w-full justify-start gap-2"
+            onClick={onNewChat}
+          >
+            <MessageSquarePlus
+              className="size-3.5 shrink-0"
+              aria-hidden="true"
+            />
+            New Chat
+          </Button>
+        </div>
+
+        {/* Search */}
+        <div className="flex items-center border-b border-border px-3 py-2.5">
+          <div className="relative flex-1">
+            <Search
+              className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none"
+              aria-hidden="true"
+            />
+            <Input
+              value={searchQuery}
+              onChange={(e) => onSearchChange?.(e.target.value)}
+              placeholder="Search conversations..."
+              className="h-8 pl-8 text-sm"
+              aria-label="Search conversations"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* ── Conversation list ── */}
+      <div className="flex-1 overflow-y-auto min-h-0" tabIndex={0}>
+        {filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center gap-2 p-8 text-muted-foreground">
+            <BrainCircuit className="size-8 opacity-30" aria-hidden="true" />
+            <p className="text-sm">
+              {searchQuery ? "No conversations found." : "No recent sessions."}
+            </p>
+            {searchQuery && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onSearchChange?.("")}
+              >
+                Clear search
+              </Button>
+            )}
+          </div>
+        ) : (
+          filtered.map((conv) => (
+            <PolicyAIHistoryItem
+              key={conv.id}
+              conv={conv}
+              isActive={conv.id === activeId}
+              onClick={() => onSelect?.(conv.id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}