@wealthx/shadcn 1.5.40 → 1.5.42

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

@@ -0,0 +1,243 @@
+import * as React from "react";
+import { PanelRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { PageTopBar } from "@/components/ui/page-top-bar";
+import { PolicyAIPanel } from "./policy-ai-panel";
+import { PolicyAIHistoryPanel } from "./policy-ai-history-panel";
+import { PolicyAIContextSidebar } from "./policy-ai-context-sidebar";
+import type {
+  PolicyAIMessage,
+  PolicyConversationItem,
+  PolicyQueryContext,
+} from "./policy-ai-primitives";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface PolicyAIPageProps {
+  // ── Chat area (pass-through to PolicyAIPanel inline) ──
+  messages?: PolicyAIMessage[];
+  suggestedQuestions?: Record<string, string[]>;
+  isStreaming?: boolean;
+  isLoading?: boolean;
+  thinkingSteps?: string[];
+  onSendMessage?: (text: string) => void;
+  onAttachFile?: (files: FileList) => void;
+  onAttachImage?: (files: FileList) => void;
+  onReset?: () => void;
+
+  // ── History panel (left) ──
+  conversations?: PolicyConversationItem[];
+  activeConversationId?: string;
+  onSelectConversation?: (id: string) => void;
+  onNewChat?: () => void;
+
+  // ── Context sidebar (right) ──
+  /**
+   * Whether the context panel starts visible.
+   * Renamed from `showContextPanel` to make uncontrolled semantics explicit —
+   * the toggle button owns the state after mount.
+   */
+  defaultShowContextPanel?: boolean;
+  bankCount?: number;
+  categoryCount?: number;
+  lastUpdated?: string;
+  /** Opens the Support Agent panel — wired to PageTopBar "Ask Support" button. */
+  onAskSupport?: () => void;
+
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+/** Derives suggested follow-up questions from the last assistant message's query context. */
+function deriveFollowUps(context: PolicyQueryContext | undefined): string[] {
+  if (!context) return [];
+
+  const { queryType, policyType, bankName } = context;
+
+  if (queryType === "cross_bank_comparison") {
+    return [
+      `Which of these banks is best overall for ${context.categories[0] ?? policyType}?`,
+      bankName
+        ? `Does ${bankName} have any exceptions?`
+        : "Which bank has the most flexible policy?",
+      "Show me the ranked list of lenders.",
+    ];
+  }
+  if (queryType === "ranking") {
+    return [
+      `What are the full details for the #1 ranked bank?`,
+      `Which banks in the list accept cases under 80% LVR?`,
+      `Compare the top 3 banks side by side.`,
+    ];
+  }
+  if (queryType === "single_bank") {
+    return [
+      `How does ${bankName ?? "this bank"} compare to other lenders?`,
+      `What documentation does ${bankName ?? "this bank"} require?`,
+      `Which banks have a better policy than ${bankName ?? "this bank"}?`,
+    ];
+  }
+  if (queryType === "threshold_filter") {
+    return [
+      `What is the maximum LVR across all filtered banks?`,
+      `Are any of these banks on a specialist product?`,
+      `Rank the filtered banks best to worst.`,
+    ];
+  }
+  return [];
+}
+
+// ---------------------------------------------------------------------------
+// PolicyAIPage (Template)
+// ---------------------------------------------------------------------------
+
+/**
+ * Dedicated full-page layout for the Policy AI feature.
+ *
+ * 3-panel layout modelled on the AI Conversations page:
+ * - **Left** (260px): `PolicyAIHistoryPanel` — recent conversations + search
+ * - **Center** (flex-1): `PolicyAIPanel` in inline mode — chat + response cards
+ * - **Right** (280px, toggle-able): `PolicyAIContextSidebar` — coverage stats +
+ *   last query context + suggested follow-ups
+ *
+ * @example
+ * <PolicyAIPage
+ *   messages={messages}
+ *   conversations={conversations}
+ *   activeConversationId={activeId}
+ *   onSendMessage={handleSend}
+ *   onSelectConversation={setActiveId}
+ *   onNewChat={handleNewChat}
+ * />
+ */
+export function PolicyAIPage({
+  // Chat
+  messages = [],
+  suggestedQuestions,
+  isStreaming = false,
+  isLoading = false,
+  thinkingSteps,
+  onSendMessage,
+  onAttachFile,
+  onAttachImage,
+  onReset,
+  // History
+  conversations = [],
+  activeConversationId,
+  onSelectConversation,
+  onNewChat,
+  // Context
+  defaultShowContextPanel = true,
+  bankCount = 42,
+  categoryCount = 86,
+  lastUpdated = "June 2026",
+  onAskSupport,
+  className,
+}: PolicyAIPageProps) {
+  const [showContextPanel, setShowContextPanel] = React.useState(
+    defaultShowContextPanel,
+  );
+  const [historySearch, setHistorySearch] = React.useState("");
+
+  // Walk backwards to find the most recent assistant message that carries a
+  // queryContext. This keeps the sidebar populated while a new (streaming)
+  // reply is pending — the in-flight message won't carry a queryContext yet.
+  // Single-pass: no intermediate array allocation.
+  const lastQueryContext = React.useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (m.role === "assistant" && m.queryContext) return m.queryContext;
+    }
+    return undefined;
+  }, [messages]);
+
+  // deriveFollowUps is a cheap pure function; no useMemo needed.
+  const followUps = deriveFollowUps(lastQueryContext);
+
+  const handleNewChat = () => {
+    onReset?.();
+    onNewChat?.();
+  };
+
+  // Derive once — used for both aria-label and title on the toggle button.
+  const panelToggleLabel = showContextPanel
+    ? "Hide context panel"
+    : "Show context panel";
+
+  return (
+    <div
+      data-slot="policy-ai-page"
+      className={cn("flex flex-col h-full bg-background", className)}
+    >
+      {/* ── Page header — uses shared PageTopBar (same as Loan CRM, Contact, etc.) ── */}
+      <PageTopBar
+        title="Policy AI"
+        actions={
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => setShowContextPanel((v) => !v)}
+            aria-label={panelToggleLabel}
+            aria-pressed={showContextPanel}
+            title={panelToggleLabel}
+          >
+            <PanelRight className="size-4" aria-hidden="true" />
+          </Button>
+        }
+        onAskSupport={onAskSupport}
+      />
+
+      {/* ── 3-panel body ── */}
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* Left — conversation history */}
+        <PolicyAIHistoryPanel
+          conversations={conversations}
+          activeId={activeConversationId}
+          onSelect={onSelectConversation}
+          onNewChat={handleNewChat}
+          searchQuery={historySearch}
+          onSearchChange={setHistorySearch}
+          className="w-[260px]"
+        />
+
+        {/* Center — chat area (PolicyAIPanel inline).
+            min-h-0 lets it shrink inside the flex row; the panel owns its
+            own overflow-y-auto so the footer stays pinned at the bottom. */}
+        <div className="flex-1 flex flex-col min-w-0 min-h-0">
+          <PolicyAIPanel
+            inline
+            messages={messages}
+            suggestedQuestions={suggestedQuestions}
+            isStreaming={isStreaming}
+            isLoading={isLoading}
+            thinkingSteps={thinkingSteps}
+            onSendMessage={onSendMessage}
+            onAttachFile={onAttachFile}
+            onAttachImage={onAttachImage}
+            onReset={onReset}
+            className="flex-1 min-h-0"
+          />
+        </div>
+
+        {/* Right — context sidebar: only shown once a conversation is active */}
+        {showContextPanel && messages.length > 0 && (
+          <PolicyAIContextSidebar
+            lastQueryContext={lastQueryContext}
+            suggestedFollowUps={followUps}
+            onFollowUpClick={onSendMessage}
+            bankCount={bankCount}
+            categoryCount={categoryCount}
+            lastUpdated={lastUpdated}
+            className="w-[280px]"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -9,6 +9,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { ChatInputArea } from "@/components/ui/chat-input-area";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ChatWidgetMessage } from "@/components/ui/chat-widget-primitives";
@@ -38,8 +39,10 @@ export interface PolicyAIFABProps {
 // ---------------------------------------------------------------------------
 
 export interface PolicyAIPanelProps {
-  open: boolean;
-  onClose: () => void;
+  /** Required in float mode; ignored in `inline` mode. */
+  open?: boolean;
+  /** Required in float mode; ignored in `inline` mode. */
+  onClose?: () => void;
   messages?: PolicyAIMessage[];
   suggestedQuestions?: Record<string, string[]>;
   isStreaming?: boolean;
@@ -286,7 +289,7 @@ export function PolicyAIFAB({
  * />
  */
 export function PolicyAIPanel({
-  open,
+  open = true,
   onClose,
   messages = [],
   suggestedQuestions,
@@ -405,60 +408,69 @@ export function PolicyAIPanel({
       {/* ── 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")}>
+          {/* Scroll container — always flex-1 + overflow-y-auto so the footer
+              stays pinned at the bottom in both float and inline modes. */}
+          <div className="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.
+              <div className="flex flex-col gap-3 px-3 py-3">
+                {/* Description */}
+                <p className="text-sm text-muted-foreground">
+                  Ask me about lending policies across 40+ Australian banks —
+                  income, LVR, security types, serviceability, and more.
+                </p>
+
+                {/* Suggested questions — wrapped in a Card for visual separation */}
+                <div className="flex flex-col gap-1.5">
+                  <p className="text-overline text-muted-foreground">
+                    Suggested
                   </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>
+                  <Card className="gap-0 py-0 shadow-none overflow-hidden">
+                    {/* Policy type tabs */}
+                    <div className="border-b border-border px-3 pt-2">
+                      <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="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>
-                  ))}
+                    {/* Question list */}
+                    <div className="divide-y divide-border">
+                      {(
+                        (suggestedQuestions ?? DEFAULT_SUGGESTED)[activeTab] ??
+                        []
+                      ).map((q) => (
+                        <button
+                          key={q}
+                          onClick={() => setInputValue(q)}
+                          className="w-full text-left text-sm text-foreground px-3 py-2.5 hover:bg-muted/60 transition-colors"
+                        >
+                          {q}
+                        </button>
+                      ))}
+                    </div>
+                  </Card>
                 </div>
               </div>
             ) : (
@@ -498,15 +510,9 @@ export function PolicyAIPanel({
           </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. */}
+              shrink-0 pins it to the flex column bottom in both modes. */}
           {!isLoading && (
-            <div
-              className={cn(
-                "border-t border-border px-3 py-3 bg-card",
-                inline ? "sticky bottom-0 z-10" : "shrink-0",
-              )}
-            >
+            <div className="shrink-0 border-t border-border px-3 py-3 bg-card">
               <ChatInputArea
                 value={inputValue}
                 onChange={setInputValue}
@@ -516,6 +522,7 @@ export function PolicyAIPanel({
                 disabled={isStreaming}
                 placeholder="Ask about lending policies…"
                 autoFocus={!minimised}
+                showMarkdownToolbar
               />
             </div>
           )}

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Building2, Info } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import {
@@ -86,12 +87,9 @@ export interface PolicyRankedListProps {
 /** Bank initial avatar — consistent across all response formats. */
 function BankAvatar({ name }: { name: string }) {
   return (
-    <span
-      aria-hidden="true"
-      className="shrink-0 inline-flex items-center justify-center size-7 bg-muted text-muted-foreground text-xs font-semibold border border-border"
-    >
-      {name.charAt(0).toUpperCase()}
-    </span>
+    <Avatar aria-hidden="true" className="size-7 shrink-0">
+      <AvatarFallback>{name.charAt(0).toUpperCase()}</AvatarFallback>
+    </Avatar>
   );
 }
 
@@ -140,16 +138,14 @@ function CitationBadge({ citation }: { citation: PolicyCitationItem }) {
       <PopoverContent className="w-72 p-3" sideOffset={6}>
         <div className="flex flex-col gap-2">
           <div className="flex items-center gap-1.5 flex-wrap">
-            <span className="text-xs font-semibold text-foreground">
+            <span className="text-sm font-semibold text-foreground">
               {citation.bankName}
             </span>
             <Badge variant="secondary" className="text-xs px-1.5 py-0">
               {citation.category}
             </Badge>
           </div>
-          <p className="text-xs text-muted-foreground leading-relaxed">
-            {citation.excerpt}
-          </p>
+          <p className="text-sm text-muted-foreground">{citation.excerpt}</p>
         </div>
       </PopoverContent>
     </Popover>
@@ -175,7 +171,7 @@ function AnswerWithCitations({
           const citation = citationMap.get(parseInt(match[1], 10));
           if (citation) return <CitationBadge key={i} citation={citation} />;
           return (
-            <span key={i} className="text-xs text-muted-foreground">
+            <span key={i} className="text-caption text-muted-foreground">
               {part}
             </span>
           );
@@ -385,7 +381,7 @@ export function PolicyComparisonTable({
                           {bank.bankName}
                         </span>
                         {bank.details && (
-                          <span className="text-xs text-muted-foreground leading-snug">
+                          <span className="text-caption text-muted-foreground">
                             {bank.details}
                           </span>
                         )}