@wealthx/shadcn 1.1.0 → 1.2.0

package/src/components/ui/ai-assistant-drawer.tsx

@@ -0,0 +1,408 @@
+import * as React from "react";
+import { Bot, RotateCcw, Send, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
+
+/**
+ * AiAssistantDrawer — WealthX DS (L5 Drawer)
+ *
+ * Right-side panel that provides an AI conversation interface for a specific
+ * opportunity/deal. Used in the Pipeline board via the "Launch Assistant" button
+ * on OpportunityCard.
+ *
+ * Layout:
+ *   • Header  — bot icon + title + reload + close
+ *   • Content — empty state (task suggestions) or chat message list
+ *   • Footer  — textarea input + send button
+ *
+ * Pure display component: all message state and API calls are managed by the
+ * consuming page. The drawer only handles local `inputValue` state.
+ *
+ * Data source: `ai-chat.ts` / `conversation.ts` hooks in the backoffice
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AiChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  /** True while the assistant response is still streaming in. */
+  isStreaming?: boolean;
+  /** True if the message failed to send or receive. */
+  isErrored?: boolean;
+}
+
+export interface AiTaskSuggestion {
+  id: string;
+  /** Short label shown as the suggestion title. */
+  title: string;
+  /** Supporting description shown below the title. */
+  description: string;
+}
+
+export interface AiAssistantDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  /** Opportunity or contact name shown in the header subtitle. */
+  opportunityName?: string;
+  /**
+   * Suggested tasks shown in the empty state.
+   * Typically the opportunity's incomplete tasks.
+   * Clicking a suggestion pre-fills the input.
+   */
+  taskSuggestions?: AiTaskSuggestion[];
+  /** Chat message history. Empty array = show empty/welcome state. */
+  messages?: AiChatMessage[];
+  /** True while the assistant is generating a response. */
+  isStreaming?: boolean;
+  /** True while initial data is loading (shows full-panel spinner). */
+  isLoading?: boolean;
+  /** Called when the user submits a message. Input is cleared after this fires. */
+  onSendMessage?: (text: string) => void;
+  /** Called when the user clicks the reload/reset button. */
+  onReset?: () => void;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Typing indicator (three bouncing dots)
+// ---------------------------------------------------------------------------
+
+function AiTypingIndicator() {
+  return (
+    <span className="flex items-center gap-1 py-1" aria-label="AI is thinking">
+      {[0, 150, 300].map((delay) => (
+        <span
+          key={delay}
+          className="size-1.5 rounded-full bg-current animate-bounce"
+          style={{ animationDelay: `${delay}ms` }}
+          aria-hidden="true"
+        />
+      ))}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Chat message bubble
+// ---------------------------------------------------------------------------
+
+function AiChatBubble({ message }: { message: AiChatMessage }) {
+  const isUser = message.role === "user";
+  const isEmpty = !message.content.trim();
+
+  return (
+    <div
+      className={cn("flex w-full", isUser ? "justify-end" : "justify-start")}
+    >
+      <div
+        className={cn(
+          "max-w-[85%] px-3 py-2 text-sm",
+          isUser
+            ? "bg-primary text-primary-foreground"
+            : "bg-muted text-foreground",
+          message.isErrored && "bg-destructive/10 text-destructive",
+        )}
+      >
+        {/* Content or streaming indicators */}
+        {isEmpty && message.isStreaming ? (
+          <AiTypingIndicator />
+        ) : (
+          <span className="whitespace-pre-wrap break-words leading-relaxed">
+            {message.content}
+          </span>
+        )}
+        {message.isErrored && (
+          <p className="mt-1 text-xs opacity-70">
+            Failed to send. Please try again.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Task suggestion card
+// ---------------------------------------------------------------------------
+
+function AiTaskCard({
+  suggestion,
+  onSelect,
+}: {
+  suggestion: AiTaskSuggestion;
+  onSelect: (text: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(suggestion.title)}
+      className="flex flex-col gap-1 border border-border bg-background p-3 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="text-sm font-medium text-foreground">
+        {suggestion.title}
+      </span>
+      <span className="text-xs text-muted-foreground">
+        {suggestion.description}
+      </span>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AiAssistantDrawer
+// ---------------------------------------------------------------------------
+
+const DEFAULT_SUGGESTIONS: AiTaskSuggestion[] = [
+  {
+    id: "s1",
+    title: "Update pricing strategy",
+    description: "Review and adjust pricing based on market trends",
+  },
+  {
+    id: "s2",
+    title: "Enhance marketing outreach",
+    description: "Develop new campaigns to increase customer engagement",
+  },
+  {
+    id: "s3",
+    title: "Optimise social media strategy",
+    description: "Analyse performance and adjust content for better visibility",
+  },
+  {
+    id: "s4",
+    title: "Implement customer feedback loops",
+    description: "Create mechanisms to collect and act on customer insights",
+  },
+];
+
+export function AiAssistantDrawer({
+  open,
+  onClose,
+  opportunityName,
+  taskSuggestions,
+  messages = [],
+  isStreaming = false,
+  isLoading = false,
+  onSendMessage,
+  onReset,
+  className,
+}: AiAssistantDrawerProps) {
+  const [inputValue, setInputValue] = React.useState("");
+  const messagesEndRef = React.useRef<HTMLDivElement>(null);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const suggestions = taskSuggestions ?? DEFAULT_SUGGESTIONS;
+  const hasMessages = messages.length > 0;
+  const canSend = inputValue.trim().length > 0 && !isStreaming && !isLoading;
+
+  // Auto-scroll to latest message
+  React.useEffect(() => {
+    if (!messagesEndRef.current) return;
+    messagesEndRef.current.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }, [messages.length]);
+
+  // Auto-resize textarea on value change
+  React.useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
+  }, [inputValue]);
+
+  const handleSend = React.useCallback(() => {
+    const text = inputValue.trim();
+    if (!text || !canSend) return;
+    onSendMessage?.(text);
+    setInputValue("");
+  }, [inputValue, canSend, onSendMessage]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleSuggestionSelect = (text: string) => {
+    setInputValue(text);
+    textareaRef.current?.focus();
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={(o) => !o && onClose()}>
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className={cn("w-[480px] max-w-full gap-0 p-0", className)}
+        data-slot="ai-assistant-drawer"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div className="flex items-center gap-3">
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary">
+              <Bot className="size-4 text-primary-foreground" />
+            </span>
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold text-foreground">
+                AI Assistant
+              </span>
+              {opportunityName && (
+                <span className="text-xs text-muted-foreground">
+                  {opportunityName}
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-1">
+            {onReset && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-8"
+                onClick={onReset}
+                title="Reset conversation"
+                disabled={isLoading}
+              >
+                <RotateCcw className="size-4" />
+                <span className="sr-only">Reset conversation</span>
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              onClick={onClose}
+              title="Close"
+            >
+              <X className="size-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex flex-1 flex-col overflow-y-auto">
+          {isLoading ? (
+            /* Loading state */
+            <div className="flex flex-1 items-center justify-center py-20">
+              <div className="flex flex-col items-center gap-3">
+                <Spinner size="lg" className="text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">Initialising…</p>
+              </div>
+            </div>
+          ) : !hasMessages ? (
+            /* Empty / welcome state */
+            <div className="flex flex-col gap-6 p-4">
+              {/* Hero card */}
+              <div className="flex flex-col gap-3 border border-border bg-muted/30 p-4">
+                <Badge variant="outline" className="w-fit gap-1.5">
+                  <span
+                    className="size-1.5 rounded-full bg-primary"
+                    aria-hidden="true"
+                  />
+                  AI Chat for Brokers
+                </Badge>
+                <p className="text-sm text-muted-foreground">
+                  A safe and secure way to chat about insights that run your
+                  business and utilise AI. All chats stay within your
+                  environment, all closed off and compliant.
+                </p>
+                <div className="flex gap-2">
+                  {(
+                    [
+                      { emoji: "🤖", label: "Smart" },
+                      { emoji: "⚡", label: "Fast" },
+                      { emoji: "🔒", label: "Secure" },
+                    ] as const
+                  ).map(({ emoji, label }) => (
+                    <span
+                      key={label}
+                      className="border border-border px-2.5 py-1 text-xs text-foreground"
+                    >
+                      {emoji} {label}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              {/* Task suggestions */}
+              {suggestions.length > 0 && (
+                <div className="flex flex-col gap-2">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    Suggested tasks
+                  </p>
+                  <div className="grid grid-cols-2 gap-2">
+                    {suggestions.map((s) => (
+                      <AiTaskCard
+                        key={s.id}
+                        suggestion={s}
+                        onSelect={handleSuggestionSelect}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            /* Message list */
+            <div className="flex flex-col gap-3 p-4">
+              {messages.map((msg) => (
+                <AiChatBubble key={msg.id} message={msg} />
+              ))}
+              {/* Streaming indicator when last message is user's */}
+              {isStreaming &&
+                messages[messages.length - 1]?.role === "user" && (
+                  <div className="flex justify-start">
+                    <div className="bg-muted px-3 py-2 text-muted-foreground">
+                      <AiTypingIndicator />
+                    </div>
+                  </div>
+                )}
+              <div ref={messagesEndRef} />
+            </div>
+          )}
+        </div>
+
+        {/* Footer — input bar */}
+        <div className="border-t border-border p-3">
+          <div className="flex items-end gap-2">
+            <Textarea
+              ref={textareaRef}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Ask me anything… (Enter to send, Shift+Enter for new line)"
+              rows={1}
+              disabled={isLoading}
+              className="min-h-0 flex-1 resize-none overflow-hidden py-2 text-sm"
+            />
+            <Button
+              size="icon"
+              onClick={handleSend}
+              disabled={!canSend}
+              className="shrink-0"
+              title="Send"
+            >
+              <Send className="size-4" />
+              <span className="sr-only">Send message</span>
+            </Button>
+          </div>
+          <p className="mt-1.5 text-[10px] text-muted-foreground">
+            Enter to send · Shift+Enter for new line
+          </p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -8,42 +8,46 @@
  *   - AlertDialogFooter:      always row, right-aligned; `border-t border-border pt-4` separator
  *   - AlertDialogMedia:       borderless icon slot — `size-10` default, `size-8` sm
  */
-import { type ReactElement } from "react"
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
-import { cn } from "@/lib/utils"
-import { useThemeVars } from "@/lib/theme-provider"
-import { buttonVariants } from "@/components/ui/button"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@/lib/utils";
+import { useThemeVars } from "@/lib/theme-provider";
+import { buttonVariants } from "@/components/ui/button";
 
-export type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>
+export type AlertDialogProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Root
+>;
 
-function AlertDialog({
-  ...props
-}: AlertDialogProps): ReactElement {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+function AlertDialog({ ...props }: AlertDialogProps): ReactElement {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-export type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>
+export type AlertDialogTriggerProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Trigger
+>;
 
 function AlertDialogTrigger({
   ...props
 }: AlertDialogTriggerProps): ReactElement {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  );
 }
 
-export type AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>
+export type AlertDialogPortalProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Portal
+>;
 
-function AlertDialogPortal({
-  ...props
-}: AlertDialogPortalProps): ReactElement {
+function AlertDialogPortal({ ...props }: AlertDialogPortalProps): ReactElement {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  );
 }
 
-export type AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>
+export type AlertDialogOverlayProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Backdrop
+>;
 
 function AlertDialogOverlay({
   className,
@@ -54,17 +58,19 @@ function AlertDialogOverlay({
       className={cn(
         // WealthX: foreground/50 scrim — matches Figma foreground token at 50% opacity
         "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
-        className
+        className,
       )}
       data-slot="alert-dialog-overlay"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Popup> & {
-  size?: "default" | "sm"
-}
+export type AlertDialogContentProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Popup
+> & {
+  size?: "default" | "sm";
+};
 
 function AlertDialogContent({
   className,
@@ -80,7 +86,7 @@ function AlertDialogContent({
         className={cn(
           // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
           "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 data-[size=sm]:max-w-xs data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[size=default]:sm:max-w-lg",
-          className
+          className,
         )}
         data-size={size}
         data-slot="alert-dialog-content"
@@ -88,10 +94,10 @@ function AlertDialogContent({
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
-export type AlertDialogHeaderProps = React.ComponentProps<"div">
+export type AlertDialogHeaderProps = React.ComponentProps<"div">;
 
 function AlertDialogHeader({
   className,
@@ -101,15 +107,15 @@ function AlertDialogHeader({
     <div
       className={cn(
         "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-        className
+        className,
       )}
       data-slot="alert-dialog-header"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogFooterProps = React.ComponentProps<"div">
+export type AlertDialogFooterProps = React.ComponentProps<"div">;
 
 function AlertDialogFooter({
   className,
@@ -120,15 +126,17 @@ function AlertDialogFooter({
       className={cn(
         // WealthX: always row, right-aligned, separator above footer (matches Figma)
         "flex flex-row justify-end gap-2 border-t border-border pt-4",
-        className
+        className,
       )}
       data-slot="alert-dialog-footer"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>
+export type AlertDialogTitleProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Title
+>;
 
 function AlertDialogTitle({
   className,
@@ -137,16 +145,18 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       className={cn(
-        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
+        "text-h5 sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
       )}
       data-slot="alert-dialog-title"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>
+export type AlertDialogDescriptionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Description
+>;
 
 function AlertDialogDescription({
   className,
@@ -155,16 +165,16 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       className={cn(
-        "text-sm text-muted-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
+        "text-body-small text-muted-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
       )}
       data-slot="alert-dialog-description"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogMediaProps = React.ComponentProps<"div">
+export type AlertDialogMediaProps = React.ComponentProps<"div">;
 
 function AlertDialogMedia({
   className,
@@ -175,18 +185,26 @@ function AlertDialogMedia({
       className={cn(
         // WealthX: borderless icon slot — size-10 default, size-8 sm
         "mb-2 inline-flex size-10 items-center justify-center group-data-[size=sm]/alert-dialog-content:size-8 sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-5",
-        className
+        className,
       )}
       data-slot="alert-dialog-media"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> & {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
-  size?: "default" | "sm" | "lg" | "xs" | "icon"
-}
+export type AlertDialogActionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Close
+> & {
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+  size?: "default" | "sm" | "lg" | "xs" | "icon";
+};
 
 function AlertDialogAction({
   className,
@@ -200,13 +218,21 @@ function AlertDialogAction({
       data-slot="alert-dialog-action"
       {...props}
     />
-  )
+  );
 }
 
-export type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> & {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
-  size?: "default" | "sm" | "lg" | "xs" | "icon"
-}
+export type AlertDialogCancelProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Close
+> & {
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+  size?: "default" | "sm" | "lg" | "xs" | "icon";
+};
 
 function AlertDialogCancel({
   className,
@@ -220,7 +246,7 @@ function AlertDialogCancel({
       data-slot="alert-dialog-cancel"
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -236,4 +262,4 @@ export {
   AlertDialogPortal,
   AlertDialogTitle,
   AlertDialogTrigger,
-}
+};