@wealthx/shadcn 1.5.16 → 1.5.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.16",
+  "version": "1.5.18",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -18,6 +18,11 @@
     "@fontsource-variable/figtree": "^5.2.10",
     "@react-awesome-query-builder/ui": "6.7.0-alpha.0",
     "@tanstack/react-table": "8.21.3",
+    "@tiptap/extension-link": "^3.23.6",
+    "@tiptap/extension-underline": "^3.23.6",
+    "@tiptap/pm": "^3.23.6",
+    "@tiptap/react": "^3.23.6",
+    "@tiptap/starter-kit": "^3.23.6",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.1",
@@ -27,6 +32,9 @@
     "lucide-react": "^0.577.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.14.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",

package/src/components/ui/ai-conversations.tsx

@@ -1,4 +1,11 @@
 import React, { useState } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import TiptapUnderline from "@tiptap/extension-underline";
+import TiptapLink from "@tiptap/extension-link";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import {
   Archive,
   ArrowLeft,
@@ -51,6 +58,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -639,13 +647,15 @@ export function ChatBubble({ message, className }: ChatBubbleProps) {
         {/* Bubble */}
         <div
           className={cn(
-            "px-3 py-2 text-sm leading-relaxed",
-            isBot && "border border-border bg-muted/60 text-foreground",
-            isVisitor && "border border-border bg-background text-foreground",
-            isAdvisor && "bg-primary text-primary-foreground",
+            "px-3 py-2 text-sm leading-relaxed break-words [&_a]:underline [&_p]:m-0",
+            isBot && "border border-border bg-muted/60 text-foreground [&_a]:text-primary",
+            isVisitor && "border border-border bg-background text-foreground [&_a]:text-primary",
+            isAdvisor && "bg-primary text-primary-foreground [&_a]:text-primary-foreground",
           )}
         >
-          {content}
+          <ReactMarkdown rehypePlugins={[rehypeRaw, [rehypeSanitize, defaultSchema]]}>
+            {content}
+          </ReactMarkdown>
         </div>
 
         {timestamp && (
@@ -692,6 +702,107 @@ export interface ChatComposerProps {
   className?: string;
 }
 
+function ComposerToolbarButton({
+  label,
+  icon: Icon,
+  pressed,
+  onToggle,
+}: {
+  label: string;
+  icon: React.ElementType;
+  pressed?: boolean;
+  onToggle?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-pressed={pressed}
+      onClick={onToggle}
+      className={cn(
+        "flex size-7 items-center justify-center transition-colors",
+        pressed
+          ? "bg-foreground text-background"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+      )}
+    >
+      <Icon className="size-3.5" />
+    </button>
+  );
+}
+
+function ComposerLinkPopover({ editor }: { editor: ReturnType<typeof useEditor> }) {
+  const [open, setOpen] = React.useState(false);
+  const [url, setUrl] = React.useState("");
+
+  const handleApply = () => {
+    if (url.trim()) {
+      editor?.chain().focus().setLink({ href: url.trim() }).run();
+    }
+    setOpen(false);
+    setUrl("");
+  };
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(newOpen) => {
+        if (newOpen && editor?.isActive("link")) {
+          editor.chain().focus().unsetLink().run();
+          return;
+        }
+        if (newOpen) setUrl("");
+        setOpen(newOpen);
+      }}
+    >
+      <PopoverTrigger
+        aria-label="Insert link"
+        className={cn(
+          "flex size-7 items-center justify-center transition-colors",
+          editor?.isActive("link")
+            ? "bg-foreground text-background"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        )}
+      >
+        <Link2 className="size-3.5" />
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-2" align="start">
+        <div className="flex items-center gap-1.5">
+          <input
+            type="url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleApply()}
+            placeholder="https://"
+            className="min-w-0 flex-1 border border-border bg-transparent px-2 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground focus:border-primary"
+            autoFocus
+          />
+          <Button size="sm" className="h-8 px-3" onClick={handleApply}>
+            Apply
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ComposerEmailFieldRow({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center gap-3 border-b border-border px-4 py-2.5">
+      <span className="w-14 shrink-0 text-sm text-muted-foreground">
+        {label}
+      </span>
+      {children}
+    </div>
+  );
+}
+
 export function ChatComposer({
   mode,
   channel: channelProp = "chat",
@@ -715,61 +826,30 @@ export function ChatComposer({
   const [emailCc, setEmailCc] = React.useState("");
   const [showCc, setShowCc] = React.useState(false);
   const [emailSubject, setEmailSubject] = React.useState("");
-  const [bold, setBold] = React.useState(false);
-  const [italic, setItalic] = React.useState(false);
-  const [underline, setUnderline] = React.useState(false);
+
+  const [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      TiptapUnderline,
+      TiptapLink.configure({ openOnClick: false }),
+    ],
+    content: "",
+    onTransaction: () => forceUpdate(),
+    editorProps: {
+      attributes: {
+        class:
+          "min-h-[150px] px-4 py-3 text-base text-foreground outline-none prose prose-sm max-w-none [&_p]:m-0 [&_a]:text-primary [&_a]:underline [&_a]:cursor-pointer",
+      },
+    },
+  });
 
   const handleChannelChange = (c: AiConvChannel) => {
     setChannel(c);
     onChannelChange?.(c);
   };
 
-  function ToolbarButton({
-    label,
-    icon: Icon,
-    pressed,
-    onToggle,
-  }: {
-    label: string;
-    icon: React.ElementType;
-    pressed?: boolean;
-    onToggle?: () => void;
-  }) {
-    return (
-      <button
-        type="button"
-        aria-label={label}
-        aria-pressed={pressed}
-        onClick={onToggle}
-        className={cn(
-          "flex size-7 items-center justify-center transition-colors",
-          pressed
-            ? "bg-foreground text-background"
-            : "text-muted-foreground hover:bg-muted hover:text-foreground",
-        )}
-      >
-        <Icon className="size-3.5" />
-      </button>
-    );
-  }
-
-  function EmailFieldRow({
-    label,
-    children,
-  }: {
-    label: string;
-    children: React.ReactNode;
-  }) {
-    return (
-      <div className="flex items-center gap-3 border-b border-border px-4 py-2.5">
-        <span className="w-14 shrink-0 text-sm text-muted-foreground">
-          {label}
-        </span>
-        {children}
-      </div>
-    );
-  }
-
   return (
     <div
       className={cn(
@@ -822,7 +902,7 @@ export function ChatComposer({
             )}
             aria-hidden={channel !== "email"}
           >
-            <EmailFieldRow label="To">
+            <ComposerEmailFieldRow label="To">
               <input
                 type="email"
                 value={emailTo}
@@ -838,9 +918,9 @@ export function ChatComposer({
                 CC
                 <ChevronDown className="size-3.5" />
               </button>
-            </EmailFieldRow>
+            </ComposerEmailFieldRow>
             {showCc && (
-              <EmailFieldRow label="CC">
+              <ComposerEmailFieldRow label="CC">
                 <input
                   type="email"
                   value={emailCc}
@@ -848,9 +928,9 @@ export function ChatComposer({
                   placeholder="CC email"
                   className="min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
                 />
-              </EmailFieldRow>
+              </ComposerEmailFieldRow>
             )}
-            <EmailFieldRow label="Subject">
+            <ComposerEmailFieldRow label="Subject">
               <input
                 type="text"
                 value={emailSubject}
@@ -858,49 +938,47 @@ export function ChatComposer({
                 placeholder="Email subject"
                 className="min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
               />
-            </EmailFieldRow>
-            <Textarea
-              value={inputValue}
-              onChange={(e) => onInputChange?.(e.target.value)}
-              placeholder="Write your email..."
-              rows={6}
-              className="resize-y border-0 px-4 py-3 text-base shadow-none focus-visible:ring-0"
-            />
+            </ComposerEmailFieldRow>
+            <EditorContent editor={editor} />
             <div className="flex items-center justify-between border-t border-border px-3 py-2">
               <div className="flex items-center gap-0.5">
-                <ToolbarButton
+                <ComposerToolbarButton
                   label="Bold"
                   icon={Bold}
-                  pressed={bold}
-                  onToggle={() => setBold((v) => !v)}
+                  pressed={editor?.isActive("bold")}
+                  onToggle={() => editor?.chain().focus().toggleBold().run()}
                 />
-                <ToolbarButton
+                <ComposerToolbarButton
                   label="Italic"
                   icon={Italic}
-                  pressed={italic}
-                  onToggle={() => setItalic((v) => !v)}
+                  pressed={editor?.isActive("italic")}
+                  onToggle={() => editor?.chain().focus().toggleItalic().run()}
                 />
-                <ToolbarButton
+                <ComposerToolbarButton
                   label="Underline"
                   icon={Underline}
-                  pressed={underline}
-                  onToggle={() => setUnderline((v) => !v)}
+                  pressed={editor?.isActive("underline")}
+                  onToggle={() =>
+                    editor?.chain().focus().toggleUnderline().run()
+                  }
                 />
                 <Separator orientation="vertical" className="mx-1.5 h-4" />
-                <ToolbarButton label="Link" icon={Link2} />
-                <ToolbarButton label="Attach file" icon={Paperclip} />
+                <ComposerLinkPopover editor={editor} />
+                <ComposerToolbarButton label="Attach file" icon={Paperclip} />
               </div>
               <Button
                 size="sm"
-                onClick={() =>
+                onClick={() => {
+                  const html = editor?.getHTML() ?? "";
                   onSendEmail?.({
-                    content: inputValue,
+                    content: html,
                     to: emailTo,
                     cc: emailCc,
                     subject: emailSubject,
-                  })
-                }
-                disabled={!inputValue.trim() || !emailTo.trim()}
+                  });
+                  editor?.commands.clearContent();
+                }}
+                disabled={!editor || editor.isEmpty || !emailTo.trim()}
               >
                 <Send className="mr-1.5 size-3.5" />
                 Send Email

package/src/components/ui/label.tsx

@@ -2,9 +2,17 @@ import { type ReactElement } from "react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export type LabelProps = React.ComponentProps<"label">;
+export type LabelProps = React.ComponentProps<"label"> & {
+  /** When true, renders a red asterisk after the label text to indicate a required field */
+  required?: boolean;
+};
 
-function Label({ className, ...props }: LabelProps): ReactElement {
+function Label({
+  className,
+  required,
+  children,
+  ...props
+}: LabelProps): ReactElement {
   return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control -- htmlFor is passed by the consumer
     <label
@@ -14,7 +22,14 @@ function Label({ className, ...props }: LabelProps): ReactElement {
       )}
       data-slot="label"
       {...props}
-    />
+    >
+      {children}
+      {required && (
+        <span aria-hidden="true" className="text-destructive">
+          *
+        </span>
+      )}
+    </label>
   );
 }