@applica-software-guru/persona-sdk 0.1.80 → 0.1.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@applica-software-guru/persona-sdk",
   "private": false,
-  "version": "0.1.80",
+  "version": "0.1.82",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,10 +12,9 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@assistant-ui/react": "^0.8.20",
-    "@assistant-ui/react-markdown": "^0.8.0",
-    "@radix-ui/react-avatar": "^1.1.7",
-    "@radix-ui/react-tooltip": "^1.2.4",
+    "@assistant-ui/react-markdown": "^0.11.6",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tailwindcss/vite": "^4.0.17",
     "@types/inflection": "^1.13.2",
     "@types/lodash": "^4.17.15",
@@ -58,7 +57,6 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.8.17",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },
   "keywords": [
@@ -69,9 +67,10 @@
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.11",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@assistant-ui/react": "^0.11.47",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
     "rehype-raw": "^7.0.0",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.9"
   }
 }

package/playground/src/components/assistant-ui/attachment.tsx

@@ -1,29 +1,14 @@
-"use client";
-
-import { PropsWithChildren, useEffect, useState, type FC } from "react";
-import { CircleXIcon, FileIcon, PaperclipIcon } from "lucide-react";
-import {
-  AttachmentPrimitive,
-  ComposerPrimitive,
-  MessagePrimitive,
-  useAttachment,
-} from "@assistant-ui/react";
-import { useShallow } from "zustand/shallow";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  Dialog,
-  DialogTitle,
-  DialogTrigger,
-  DialogOverlay,
-  DialogPortal,
-} from "@/components/ui/dialog";
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { DialogContent as DialogPrimitiveContent } from "@radix-ui/react-dialog";
+'use client';
+
+import { PropsWithChildren, useEffect, useState, type FC } from 'react';
+import { XIcon, PlusIcon, FileText } from 'lucide-react';
+import { AttachmentPrimitive, ComposerPrimitive, MessagePrimitive, useAssistantState, useAssistantApi } from '@assistant-ui/react';
+import { useShallow } from 'zustand/shallow';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Dialog, DialogTitle, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
+import { cn } from '@/lib/utils';
 
 const useFileSrc = (file: File | undefined) => {
   const [src, setSrc] = useState<string | undefined>(undefined);
@@ -46,11 +31,11 @@ const useFileSrc = (file: File | undefined) => {
 };
 
 const useAttachmentSrc = () => {
-  const { file, src } = useAttachment(
-    useShallow((a): { file?: File; src?: string } => {
-      if (a.type !== "image") return {};
-      if (a.file) return { file: a.file };
-      const src = a.content?.filter((c) => c.type === "image")[0]?.image;
+  const { file, src } = useAssistantState(
+    useShallow(({ attachment }): { file?: File; src?: string } => {
+      if (attachment.type !== 'image') return {};
+      if (attachment.file) return { file: attachment.file };
+      const src = attachment.content?.filter((c) => c.type === 'image')[0]?.image;
       if (!src) return {};
       return { src };
     }),
@@ -65,21 +50,18 @@ type AttachmentPreviewProps = {
 
 const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
   const [isLoaded, setIsLoaded] = useState(false);
-
   return (
-    // eslint-disable-next-line @next/next/no-img-element
     <img
       src={src}
-      style={{
-        width: "auto",
-        height: "auto",
-        maxWidth: "75dvh",
-        maxHeight: "75dvh",
-        display: isLoaded ? "block" : "none",
-        overflow: "clip",
-      }}
+      alt="Image Preview"
+      width={1}
+      height={1}
+      className={
+        isLoaded
+          ? 'aui-attachment-preview-image-loaded block h-auto max-h-[80vh] w-auto max-w-full object-contain'
+          : 'aui-attachment-preview-image-loading hidden'
+      }
       onLoad={() => setIsLoaded(true)}
-      alt="Preview"
     />
   );
 };
@@ -91,65 +73,74 @@ const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <Dialog>
-      <DialogTrigger className="hover:bg-accent/50 cursor-pointer transition-colors" asChild>
+      <DialogTrigger className="aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50" asChild>
         {children}
       </DialogTrigger>
-      <AttachmentDialogContent>
-        <DialogTitle className="aui-sr-only">
-          Image Attachment Preview
-        </DialogTitle>
-        <AttachmentPreview src={src} />
-      </AttachmentDialogContent>
+      <DialogContent className="aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive">
+        <DialogTitle className="aui-sr-only sr-only">Image Attachment Preview</DialogTitle>
+        <div className="aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background">
+          <AttachmentPreview src={src} />
+        </div>
+      </DialogContent>
     </Dialog>
   );
 };
 
 const AttachmentThumb: FC = () => {
-  const isImage = useAttachment((a) => a.type === "image");
+  const isImage = useAssistantState(({ attachment }) => attachment.type === 'image');
   const src = useAttachmentSrc();
+
   return (
-    <Avatar className="bg-muted flex size-10 items-center justify-center rounded border text-sm">
+    <Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
+      <AvatarImage src={src} alt="Attachment preview" className="aui-attachment-tile-image object-cover" />
       <AvatarFallback delayMs={isImage ? 200 : 0}>
-        <FileIcon />
+        <FileText className="aui-attachment-tile-fallback-icon size-8 text-muted-foreground" />
       </AvatarFallback>
-      <AvatarImage src={src} />
     </Avatar>
   );
 };
 
 const AttachmentUI: FC = () => {
-  const canRemove = useAttachment((a) => a.source !== "message");
-  const typeLabel = useAttachment((a) => {
-    const type = a.type;
+  const api = useAssistantApi();
+  const isComposer = api.attachment.source === 'composer';
+
+  const isImage = useAssistantState(({ attachment }) => attachment.type === 'image');
+  const typeLabel = useAssistantState(({ attachment }) => {
+    const type = attachment.type;
     switch (type) {
-      case "image":
-        return "Image";
-      case "document":
-        return "Document";
-      case "file":
-        return "File";
+      case 'image':
+        return 'Image';
+      case 'document':
+        return 'Document';
+      case 'file':
+        return 'File';
       default:
         const _exhaustiveCheck: never = type;
         throw new Error(`Unknown attachment type: ${_exhaustiveCheck}`);
     }
   });
+
   return (
     <Tooltip>
-      <AttachmentPrimitive.Root className="relative mt-3">
+      <AttachmentPrimitive.Root
+        className={cn('aui-attachment-root relative', isImage && 'aui-attachment-root-composer only:[&>#attachment-tile]:size-24')}
+      >
         <AttachmentPreviewDialog>
           <TooltipTrigger asChild>
-            <div className="flex h-12 w-40 items-center justify-center gap-2 rounded-lg border p-1">
+            <div
+              className={cn(
+                'aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75',
+                isComposer && 'aui-attachment-tile-composer border-foreground/20',
+              )}
+              role="button"
+              id="attachment-tile"
+              aria-label={`${typeLabel} attachment`}
+            >
               <AttachmentThumb />
-              <div className="flex-grow basis-0">
-                <p className="text-muted-foreground line-clamp-1 text-ellipsis break-all text-xs font-bold">
-                  <AttachmentPrimitive.Name />
-                </p>
-                <p className="text-muted-foreground text-xs">{typeLabel}</p>
-              </div>
             </div>
           </TooltipTrigger>
         </AttachmentPreviewDialog>
-        {canRemove && <AttachmentRemove />}
+        {isComposer && <AttachmentRemove />}
       </AttachmentPrimitive.Root>
       <TooltipContent side="top">
         <AttachmentPrimitive.Name />
@@ -163,10 +154,10 @@ const AttachmentRemove: FC = () => {
     <AttachmentPrimitive.Remove asChild>
       <TooltipIconButton
         tooltip="Remove file"
-        className="text-muted-foreground [&>svg]:bg-background absolute -right-3 -top-3 size-6 [&>svg]:size-4 [&>svg]:rounded-full"
+        className="aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive"
         side="top"
       >
-        <CircleXIcon />
+        <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
       </TooltipIconButton>
     </AttachmentPrimitive.Remove>
   );
@@ -174,7 +165,7 @@ const AttachmentRemove: FC = () => {
 
 export const UserMessageAttachments: FC = () => {
   return (
-    <div className="flex w-full flex-row gap-3 col-span-full col-start-1 row-start-1 justify-end">
+    <div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
       <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
     </div>
   );
@@ -182,10 +173,8 @@ export const UserMessageAttachments: FC = () => {
 
 export const ComposerAttachments: FC = () => {
   return (
-    <div className="flex w-full flex-row gap-3 px-10">
-      <ComposerPrimitive.Attachments
-        components={{ Attachment: AttachmentUI }}
-      />
+    <div className="aui-composer-attachments mb-2 flex w-full flex-row items-center gap-2 overflow-x-auto px-1.5 pt-0.5 pb-1 empty:hidden">
+      <ComposerPrimitive.Attachments components={{ Attachment: AttachmentUI }} />
     </div>
   );
 };
@@ -194,21 +183,15 @@ export const ComposerAddAttachment: FC = () => {
   return (
     <ComposerPrimitive.AddAttachment asChild>
       <TooltipIconButton
-        className="my-2.5 size-8 p-2 transition-opacity ease-in"
         tooltip="Add Attachment"
+        side="bottom"
         variant="ghost"
+        size="icon"
+        className="aui-composer-add-attachment size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+        aria-label="Add Attachment"
       >
-        <PaperclipIcon />
+        <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
       </TooltipIconButton>
     </ComposerPrimitive.AddAttachment>
   );
 };
-
-const AttachmentDialogContent: FC<PropsWithChildren> = ({ children }) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitiveContent className="aui-dialog-content">
-      {children}
-    </DialogPrimitiveContent>
-  </DialogPortal>
-);

package/playground/src/components/assistant-ui/markdown-text.tsx

@@ -1,25 +1,27 @@
-'use client';
+"use client";
 
-import '@assistant-ui/react-markdown/styles/dot.css';
+import "@assistant-ui/react-markdown/styles/dot.css";
 
 import {
-  CodeHeaderProps,
+  type CodeHeaderProps,
   MarkdownTextPrimitive,
   unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
   useIsMarkdownCodeBlock,
-} from '@assistant-ui/react-markdown';
-import remarkGfm from 'remark-gfm';
-import { FC, memo, useState } from 'react';
-import { CheckIcon, CopyIcon } from 'lucide-react';
+} from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { type FC, memo, useState } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
 
-import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
-import { cn } from '@/lib/utils';
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
 
 const MarkdownTextImpl = () => {
   return (
-    <>
-      <MarkdownTextPrimitive remarkPlugins={[remarkGfm]} className="aui-md" components={defaultComponents} />
-    </>
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm]}
+      className="aui-md"
+      components={defaultComponents}
+    />
   );
 };
 
@@ -33,8 +35,10 @@ const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
   };
 
   return (
-    <div className="flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white">
-      <span className="lowercase [&>span]:text-xs">{language}</span>
+    <div className="aui-code-header-root mt-4 flex items-center justify-between gap-4 rounded-t-lg bg-muted-foreground/15 px-4 py-2 font-semibold text-foreground text-sm dark:bg-muted-foreground/20">
+      <span className="aui-code-header-language lowercase [&>span]:text-xs">
+        {language}
+      </span>
       <TooltipIconButton tooltip="Copy" onClick={onCopy}>
         {!isCopied && <CopyIcon />}
         {isCopied && <CheckIcon />}
@@ -64,32 +68,111 @@ const useCopyToClipboard = ({
 
 const defaultComponents = memoizeMarkdownComponents({
   h1: ({ className, ...props }) => (
-    <h1 className={cn('mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0', className)} {...props} />
+    <h1
+      className={cn(
+        "aui-md-h1 mb-8 scroll-m-20 font-extrabold text-4xl tracking-tight last:mb-0",
+        className,
+      )}
+      {...props}
+    />
   ),
   h2: ({ className, ...props }) => (
-    <h2 className={cn('mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0', className)} {...props} />
+    <h2
+      className={cn(
+        "aui-md-h2 mt-8 mb-4 scroll-m-20 font-semibold text-3xl tracking-tight first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
   ),
   h3: ({ className, ...props }) => (
-    <h3 className={cn('mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0', className)} {...props} />
+    <h3
+      className={cn(
+        "aui-md-h3 mt-6 mb-4 scroll-m-20 font-semibold text-2xl tracking-tight first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
   ),
   h4: ({ className, ...props }) => (
-    <h4 className={cn('mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0', className)} {...props} />
-  ),
-  h5: ({ className, ...props }) => <h5 className={cn('my-4 text-lg font-semibold first:mt-0 last:mb-0', className)} {...props} />,
-  h6: ({ className, ...props }) => <h6 className={cn('my-4 font-semibold first:mt-0 last:mb-0', className)} {...props} />,
-  p: ({ className, ...props }) => <p className={cn('mb-5 mt-5 leading-7 first:mt-0 last:mb-0', className)} {...props} />,
-  a: ({ className, ...props }) => <a className={cn('text-primary font-medium underline underline-offset-4', className)} {...props} />,
-  blockquote: ({ className, ...props }) => <blockquote className={cn('border-l-2 pl-6 italic', className)} {...props} />,
-  ul: ({ className, ...props }) => <ul className={cn('my-5 ml-6 list-disc [&>li]:mt-2', className)} {...props} />,
-  ol: ({ className, ...props }) => <ol className={cn('my-5 ml-6 list-decimal [&>li]:mt-2', className)} {...props} />,
-  hr: ({ className, ...props }) => <hr className={cn('my-5 border-b', className)} {...props} />,
+    <h4
+      className={cn(
+        "aui-md-h4 mt-6 mb-4 scroll-m-20 font-semibold text-xl tracking-tight first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(
+        "aui-md-h5 my-4 font-semibold text-lg first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(
+        "aui-md-h6 my-4 font-semibold first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn(
+        "aui-md-p mt-5 mb-5 leading-7 first:mt-0 last:mb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  a: ({ className, ...props }) => (
+    <a
+      className={cn(
+        "aui-md-a font-medium text-primary underline underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn("aui-md-blockquote border-l-2 pl-6 italic", className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn("aui-md-ul my-5 ml-6 list-disc [&>li]:mt-2", className)}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn("aui-md-ol my-5 ml-6 list-decimal [&>li]:mt-2", className)}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr className={cn("aui-md-hr my-5 border-b", className)} {...props} />
+  ),
   table: ({ className, ...props }) => (
-    <table className={cn('my-5 w-full border-separate border-spacing-0 overflow-y-auto', className)} {...props} />
+    <table
+      className={cn(
+        "aui-md-table my-5 w-full border-separate border-spacing-0 overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
   ),
   th: ({ className, ...props }) => (
     <th
       className={cn(
-        'bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right',
+        "aui-md-th bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",
         className,
       )}
       {...props}
@@ -98,7 +181,7 @@ const defaultComponents = memoizeMarkdownComponents({
   td: ({ className, ...props }) => (
     <td
       className={cn(
-        'border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right',
+        "aui-md-td border-b border-l px-4 py-2 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
         className,
       )}
       {...props}
@@ -107,17 +190,39 @@ const defaultComponents = memoizeMarkdownComponents({
   tr: ({ className, ...props }) => (
     <tr
       className={cn(
-        'm-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg',
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        className,
+      )}
+      {...props}
+    />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup
+      className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
+      {...props}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      className={cn(
+        "aui-md-pre overflow-x-auto rounded-t-none! rounded-b-lg bg-black p-4 text-white",
         className,
       )}
       {...props}
     />
   ),
-  sup: ({ className, ...props }) => <sup className={cn('[&>a]:text-xs [&>a]:no-underline', className)} {...props} />,
-  pre: ({ className, ...props }) => <pre className={cn('overflow-x-auto rounded-b-lg bg-black p-4 text-white', className)} {...props} />,
   code: function Code({ className, ...props }) {
     const isCodeBlock = useIsMarkdownCodeBlock();
-    return <code className={cn(!isCodeBlock && 'bg-muted rounded border font-semibold', className)} {...props} />;
+    return (
+      <code
+        className={cn(
+          !isCodeBlock &&
+            "aui-md-inline-code rounded border bg-muted font-semibold",
+          className,
+        )}
+        {...props}
+      />
+    );
   },
   CodeHeader,
 });