@wealthx/shadcn 1.5.37 → 1.5.39

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

@@ -0,0 +1,526 @@
+import * as React from "react";
+import {
+  BrainCircuit,
+  Check,
+  ChevronDown,
+  Minus,
+  RotateCcw,
+  X,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ChatInputArea } from "@/components/ui/chat-input-area";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ChatWidgetMessage } from "@/components/ui/chat-widget-primitives";
+import {
+  PolicySingleBankAnswer,
+  PolicyComparisonTable,
+  PolicyRankedList,
+} from "./policy-ai-responses";
+import type {
+  PolicyAIMessage,
+  PolicyQueryContext,
+  PolicyResponseContent,
+} from "./policy-ai-primitives";
+
+// ---------------------------------------------------------------------------
+// PolicyAIFAB props
+// ---------------------------------------------------------------------------
+
+export interface PolicyAIFABProps {
+  onClick: () => void;
+  hasNudge?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIPanelProps
+// ---------------------------------------------------------------------------
+
+export interface PolicyAIPanelProps {
+  open: boolean;
+  onClose: () => void;
+  messages?: PolicyAIMessage[];
+  suggestedQuestions?: Record<string, string[]>;
+  isStreaming?: boolean;
+  isLoading?: boolean;
+  /**
+   * Custom thinking steps shown during loading/streaming.
+   * Defaults to the built-in 4-step sequence if not provided.
+   */
+  thinkingSteps?: string[];
+  onSendMessage?: (text: string) => void;
+  /** Called when the user selects files via the paperclip attachment button. */
+  onAttachFile?: (files: FileList) => void;
+  /** Called when the user selects images via the image upload button. */
+  onAttachImage?: (files: FileList) => void;
+  onReset?: () => void;
+  /** Position relative to viewport — defaults to bottom-right. Ignored when `inline` is true. */
+  position?: "bottom-right" | "bottom-left";
+  /**
+   * When true, renders as an inline block filling its parent container instead
+   * of a fixed-position float widget. Use inside drawers, sheets, or tab panels.
+   * Hides the minimize and close buttons.
+   */
+  inline?: boolean;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+type PolicyTypeTab =
+  | "Income"
+  | "Security"
+  | "Serviceability"
+  | "Loan Type"
+  | "Borrower";
+
+const DEFAULT_SUGGESTED: Record<PolicyTypeTab, string[]> = {
+  Income: [
+    "Which banks accept casual income?",
+    "Which lenders accept bonus income, ranked best to worst?",
+    "How is self-employed income assessed across lenders?",
+  ],
+  Security: [
+    "Which banks accept apartments under 40sqm?",
+    "What is the maximum LVR for a serviced apartment?",
+    "Do any lenders accept hobby farm properties?",
+  ],
+  Serviceability: [
+    "Which banks have the most flexible DTI ratio?",
+    "How is HECS debt treated by different lenders?",
+    "Which lenders apply the lowest assessment buffer rate?",
+  ],
+  "Loan Type": [
+    "Which lenders offer cashback on refinances?",
+    "Which banks accept low-doc construction loans?",
+    "What are the pre-approval policies across lenders?",
+  ],
+  Borrower: [
+    "Which banks accept non-resident borrowers?",
+    "Which lenders offer LMI waiver for medical professionals?",
+    "How do lenders treat prior credit impairment?",
+  ],
+};
+
+const DEFAULT_THINKING_STEPS = [
+  "Classifying query type…",
+  "Searching across 40+ banks…",
+  "Retrieving policy documents…",
+  "Generating response…",
+];
+
+// ---------------------------------------------------------------------------
+// PolicyAIThinkingSteps
+// ---------------------------------------------------------------------------
+
+/**
+ * Animated thinking steps shown while the AI is working.
+ * Steps progress automatically on a timer; completed steps show a check mark.
+ */
+function PolicyAIThinkingSteps({ steps }: { steps: string[] }) {
+  const [currentStep, setCurrentStep] = React.useState(0);
+
+  React.useEffect(() => {
+    setCurrentStep(0);
+  }, [steps]);
+
+  React.useEffect(() => {
+    if (currentStep >= steps.length - 1) return;
+    const timer = setTimeout(() => setCurrentStep((s) => s + 1), 1400);
+    return () => clearTimeout(timer);
+  }, [currentStep, steps.length]);
+
+  return (
+    <div className="flex flex-col gap-2.5 px-4 py-3">
+      {steps.map((step, i) => {
+        const isDone = i < currentStep;
+        const isCurrent = i === currentStep;
+        const isPending = i > currentStep;
+
+        return (
+          <div
+            key={step}
+            className={cn(
+              "flex items-center gap-2.5 transition-opacity duration-300",
+              isPending && "opacity-30",
+            )}
+          >
+            <span className="shrink-0 size-4 flex items-center justify-center">
+              {isDone ? (
+                <Check className="size-3.5 text-primary" aria-hidden="true" />
+              ) : isCurrent ? (
+                <span
+                  className="flex items-center gap-0.5"
+                  aria-label="In progress"
+                >
+                  {[0, 1, 2].map((j) => (
+                    <span
+                      key={j}
+                      className="size-1 bg-muted-foreground/70 animate-bounce"
+                      style={{ animationDelay: `${j * 150}ms` }}
+                    />
+                  ))}
+                </span>
+              ) : null}
+            </span>
+
+            <span
+              className={cn(
+                "text-sm leading-snug transition-colors duration-200",
+                isDone && "text-muted-foreground",
+                isCurrent && "text-foreground font-medium",
+                isPending && "text-muted-foreground",
+              )}
+            >
+              {step}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ResponseCard — dispatches to the correct response molecule
+// ---------------------------------------------------------------------------
+
+function ResponseCard({
+  content,
+  queryContext,
+}: {
+  content: PolicyResponseContent;
+  queryContext?: PolicyQueryContext;
+}) {
+  if (content.type === "single_bank") {
+    return (
+      <PolicySingleBankAnswer
+        bankName={content.bankName}
+        verdict={content.verdict}
+        answer={content.answer}
+        citations={content.citations}
+        queryContext={queryContext}
+      />
+    );
+  }
+  if (content.type === "cross_bank_comparison") {
+    return (
+      <PolicyComparisonTable
+        categories={content.categories}
+        banks={content.banks}
+        summaryCounts={content.summaryCounts}
+        citations={content.citations}
+        queryContext={queryContext}
+      />
+    );
+  }
+  if (content.type === "ranked_list") {
+    return (
+      <PolicyRankedList
+        categories={content.categories}
+        banks={content.banks}
+        citations={content.citations}
+        queryContext={queryContext}
+      />
+    );
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIFAB (Molecule)
+// ---------------------------------------------------------------------------
+
+/**
+ * Floating action button that opens the PolicyAIPanel.
+ *
+ * @example
+ * <PolicyAIFAB onClick={() => setOpen(true)} />
+ */
+export function PolicyAIFAB({
+  onClick,
+  hasNudge,
+  className,
+}: PolicyAIFABProps) {
+  return (
+    <div className={cn("relative inline-flex shrink-0", className)}>
+      <Button
+        data-slot="policy-ai-fab"
+        size="icon"
+        onClick={onClick}
+        className="size-12 shadow-lg rounded-full"
+        aria-label="Open Policy AI"
+      >
+        <BrainCircuit className="size-5" aria-hidden="true" />
+      </Button>
+      {hasNudge && (
+        <span className="absolute -top-1 -right-1 size-3 bg-destructive rounded-full border-2 border-background" />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIPanel (Organism) — Jira Rovo-style floating / inline widget
+// ---------------------------------------------------------------------------
+
+/**
+ * Policy AI chat panel — shows suggested questions in home state and
+ * structured response cards (SingleBankAnswer / ComparisonTable / RankedList)
+ * in chat state.
+ *
+ * Float mode: fixed-position overlay next to the FAB.
+ * Inline mode: fills its parent container — use inside drawers or tab panels.
+ *
+ * @example
+ * <PolicyAIFAB onClick={() => setOpen(true)} />
+ * <PolicyAIPanel
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   messages={messages}
+ *   onSendMessage={handleSend}
+ *   onReset={() => setMessages([])}
+ * />
+ */
+export function PolicyAIPanel({
+  open,
+  onClose,
+  messages = [],
+  suggestedQuestions,
+  isStreaming = false,
+  isLoading = false,
+  thinkingSteps,
+  onSendMessage,
+  onAttachFile,
+  onAttachImage,
+  onReset,
+  position = "bottom-right",
+  inline = false,
+  className,
+}: PolicyAIPanelProps) {
+  const resolvedThinkingSteps = thinkingSteps ?? DEFAULT_THINKING_STEPS;
+  const [inputValue, setInputValue] = React.useState("");
+  const [minimised, setMinimised] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState<PolicyTypeTab>("Income");
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+
+  const isChatMode = messages.length > 0;
+
+  // Auto-scroll to latest message
+  React.useEffect(() => {
+    if (open && !minimised) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [messages, open, minimised]);
+
+  const handleSend = React.useCallback(
+    (text: string) => {
+      if (!text || isStreaming) return;
+      onSendMessage?.(text);
+      setInputValue("");
+    },
+    [isStreaming, onSendMessage],
+  );
+
+  if (!open) return null;
+
+  const positionClass = position === "bottom-left" ? "left-6" : "right-6";
+
+  return (
+    <div
+      data-slot="policy-ai-panel"
+      className={cn(
+        "flex flex-col bg-card",
+        inline
+          ? "h-full border-0"
+          : [
+              "fixed z-50 border border-border shadow-2xl",
+              "bottom-20 w-[400px]",
+              "animate-in slide-in-from-bottom-4 fade-in duration-200",
+              positionClass,
+              minimised && "shadow-lg",
+            ],
+        className,
+      )}
+      style={
+        inline
+          ? undefined
+          : {
+              maxHeight: minimised ? "auto" : "min(600px, calc(100vh - 120px))",
+            }
+      }
+    >
+      {/* ── Header — float mode only ── */}
+      {!inline && (
+        <div className="shrink-0 flex items-center gap-2.5 px-3 py-2.5 border-b border-border bg-card">
+          <BrainCircuit
+            className="size-4 text-primary shrink-0"
+            aria-hidden="true"
+          />
+          <span className="text-sm font-semibold text-foreground flex-1 truncate">
+            Policy AI
+          </span>
+
+          <div className="flex items-center gap-0.5">
+            {isChatMode && onReset && !minimised && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={onReset}
+                title="New conversation"
+                aria-label="New conversation"
+              >
+                <RotateCcw className="size-3.5" aria-hidden="true" />
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => setMinimised((v) => !v)}
+              title={minimised ? "Restore" : "Minimise"}
+              aria-label={minimised ? "Restore panel" : "Minimise panel"}
+            >
+              {minimised ? (
+                <ChevronDown className="size-3.5" aria-hidden="true" />
+              ) : (
+                <Minus className="size-3.5" aria-hidden="true" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={onClose}
+              title="Close"
+              aria-label="Close Policy AI"
+            >
+              <X className="size-3.5" aria-hidden="true" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* ── Body ── */}
+      {(!minimised || inline) && (
+        <>
+          {/* Scroll container:
+              Float — scrolls internally (flex-1 + overflow-y-auto).
+              Inline — parent tab/drawer is the scroller; content flows naturally. */}
+          <div className={cn(!inline && "flex-1 overflow-y-auto min-h-0")}>
+            {isLoading ? (
+              <div className="flex flex-col justify-center h-full py-8">
+                <PolicyAIThinkingSteps steps={resolvedThinkingSteps} />
+              </div>
+            ) : !isChatMode ? (
+              /* Home state — suggested questions by policy type */
+              <div className="flex flex-col">
+                <div className="px-3 pt-3 pb-2">
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    Ask me about lending policies across 40+ Australian banks —
+                    income, LVR, security types, serviceability, and more.
+                  </p>
+                </div>
+
+                <div className="border-b border-border px-3 pt-1">
+                  <Tabs
+                    value={activeTab}
+                    onValueChange={(v) => setActiveTab(v as PolicyTypeTab)}
+                  >
+                    <TabsList
+                      variant="line"
+                      className="justify-start h-8 gap-0 -mb-px overflow-x-auto"
+                    >
+                      {(Object.keys(DEFAULT_SUGGESTED) as PolicyTypeTab[]).map(
+                        (type) => (
+                          <TabsTrigger
+                            key={type}
+                            value={type}
+                            className="text-xs px-2 h-7 shrink-0"
+                          >
+                            {type}
+                          </TabsTrigger>
+                        ),
+                      )}
+                    </TabsList>
+                  </Tabs>
+                </div>
+
+                <div className="flex flex-col px-3 py-2 gap-1">
+                  {(
+                    (suggestedQuestions ?? DEFAULT_SUGGESTED)[activeTab] ?? []
+                  ).map((q) => (
+                    <button
+                      key={q}
+                      onClick={() => setInputValue(q)}
+                      className="w-full text-left text-xs text-foreground px-3 py-2 border border-border hover:bg-muted/60 transition-colors leading-relaxed"
+                    >
+                      {q}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              /* Chat state — messages + structured response cards */
+              <div className="flex flex-col gap-4 px-3 py-3">
+                {messages.map((msg) =>
+                  msg.role === "user" ? (
+                    <ChatWidgetMessage
+                      key={msg.id}
+                      role="user"
+                      content={msg.content}
+                    />
+                  ) : (
+                    <div key={msg.id} className="flex flex-col gap-1.5">
+                      {msg.content && (
+                        <p className="text-sm text-foreground leading-relaxed">
+                          {msg.content}
+                        </p>
+                      )}
+                      {msg.responseContent && (
+                        <ResponseCard
+                          content={msg.responseContent}
+                          queryContext={msg.queryContext}
+                        />
+                      )}
+                    </div>
+                  ),
+                )}
+
+                {isStreaming && (
+                  <PolicyAIThinkingSteps steps={resolvedThinkingSteps} />
+                )}
+
+                <div ref={messagesEndRef} />
+              </div>
+            )}
+          </div>
+
+          {/* Footer input — hidden during loading.
+              Float: shrink-0 pins it to the flex column bottom.
+              Inline: sticky bottom-0 keeps it visible as the parent tab scrolls. */}
+          {!isLoading && (
+            <div
+              className={cn(
+                "border-t border-border px-3 py-3 bg-card",
+                inline ? "sticky bottom-0 z-10" : "shrink-0",
+              )}
+            >
+              <ChatInputArea
+                value={inputValue}
+                onChange={setInputValue}
+                onSend={handleSend}
+                onAttachFile={onAttachFile}
+                onAttachImage={onAttachImage}
+                disabled={isStreaming}
+                placeholder="Ask about lending policies…"
+                autoFocus={!minimised}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}