@applica-software-guru/persona-sdk 0.1.48 → 0.1.52

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

@@ -0,0 +1,214 @@
+"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";
+
+const useFileSrc = (file: File | undefined) => {
+  const [src, setSrc] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(undefined);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setSrc(objectUrl);
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+
+  return src;
+};
+
+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;
+      if (!src) return {};
+      return { src };
+    }),
+  );
+
+  return useFileSrc(file) ?? src;
+};
+
+type AttachmentPreviewProps = {
+  src: string;
+};
+
+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",
+      }}
+      onLoad={() => setIsLoaded(true)}
+      alt="Preview"
+    />
+  );
+};
+
+const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
+  const src = useAttachmentSrc();
+
+  if (!src) return children;
+
+  return (
+    <Dialog>
+      <DialogTrigger className="hover:bg-accent/50 cursor-pointer transition-colors" asChild>
+        {children}
+      </DialogTrigger>
+      <AttachmentDialogContent>
+        <DialogTitle className="aui-sr-only">
+          Image Attachment Preview
+        </DialogTitle>
+        <AttachmentPreview src={src} />
+      </AttachmentDialogContent>
+    </Dialog>
+  );
+};
+
+const AttachmentThumb: FC = () => {
+  const isImage = useAttachment((a) => a.type === "image");
+  const src = useAttachmentSrc();
+  return (
+    <Avatar className="bg-muted flex size-10 items-center justify-center rounded border text-sm">
+      <AvatarFallback delayMs={isImage ? 200 : 0}>
+        <FileIcon />
+      </AvatarFallback>
+      <AvatarImage src={src} />
+    </Avatar>
+  );
+};
+
+const AttachmentUI: FC = () => {
+  const canRemove = useAttachment((a) => a.source !== "message");
+  const typeLabel = useAttachment((a) => {
+    const type = a.type;
+    switch (type) {
+      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">
+        <AttachmentPreviewDialog>
+          <TooltipTrigger asChild>
+            <div className="flex h-12 w-40 items-center justify-center gap-2 rounded-lg border p-1">
+              <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 />}
+      </AttachmentPrimitive.Root>
+      <TooltipContent side="top">
+        <AttachmentPrimitive.Name />
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+const AttachmentRemove: FC = () => {
+  return (
+    <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"
+        side="top"
+      >
+        <CircleXIcon />
+      </TooltipIconButton>
+    </AttachmentPrimitive.Remove>
+  );
+};
+
+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">
+      <MessagePrimitive.Attachments components={{ Attachment: AttachmentUI }} />
+    </div>
+  );
+};
+
+export const ComposerAttachments: FC = () => {
+  return (
+    <div className="flex w-full flex-row gap-3 px-10">
+      <ComposerPrimitive.Attachments
+        components={{ Attachment: AttachmentUI }}
+      />
+    </div>
+  );
+};
+
+export const ComposerAddAttachment: FC = () => {
+  return (
+    <ComposerPrimitive.AddAttachment asChild>
+      <TooltipIconButton
+        className="my-2.5 size-8 p-2 transition-opacity ease-in"
+        tooltip="Add Attachment"
+        variant="ghost"
+      >
+        <PaperclipIcon />
+      </TooltipIconButton>
+    </ComposerPrimitive.AddAttachment>
+  );
+};
+
+const AttachmentDialogContent: FC<PropsWithChildren> = ({ children }) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitiveContent className="aui-dialog-content">
+      {children}
+    </DialogPrimitiveContent>
+  </DialogPortal>
+);

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

@@ -30,6 +30,7 @@ import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button
 import { ToolFallback } from '@/components/assistant-ui/tool-fallback';
 
 import { usePersonaRuntimeEndpoint, usePersonaRuntimeWebRTCProtocol } from '@applica-software-guru/persona-sdk';
+import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } from './attachment';
 
 export const Thread: FC = () => {
   return (
@@ -89,6 +90,8 @@ const ThreadWelcome: FC = () => {
 const Composer: FC = () => {
   return (
     <ComposerPrimitive.Root className="focus-within:border-ring/20 flex w-full flex-wrap items-end rounded-lg border bg-inherit px-2.5 shadow-sm transition-colors ease-in">
+      <ComposerAttachments />
+      <ComposerAddAttachment />
       <ComposerPrimitive.Input
         rows={1}
         autoFocus
@@ -118,7 +121,7 @@ const SpeakButton: FC = () => {
   return (
     <TooltipIconButton
       className={cn(
-        'hover:text-primary my-2.5 size-8 p-2 ml-2 transition-opacity ease-in text-foreground cursor-pointer',
+        'hover:text-primary my-2.5 size-8 p-2 ml-2 transition-opacity ease-in cursor-pointer',
         isConnected && 'animate-pulse text-blue-500',
       )}
       variant="default"
@@ -156,6 +159,7 @@ const UserMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="grid auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 [&:where(>*)]:col-start-2 w-full max-w-[var(--thread-max-width)] py-4">
       <div className="bg-muted text-foreground max-w-[calc(var(--thread-max-width)*0.8)] break-words rounded-3xl px-5 py-2.5 col-start-2 row-start-2">
+        <UserMessageAttachments />
         <MessagePrimitive.Content />
       </div>
 

package/playground/src/components/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/playground/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }

package/playground/src/styles.css

@@ -1 +1,120 @@
 @import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/protocol/base.ts

@@ -1,6 +1,6 @@
 import {
-  Message,
   MessageListenerCallback,
+  PersonaMessage,
   PersonaPayload,
   PersonaProtocol,
   PersonaTransaction,
@@ -58,7 +58,7 @@ abstract class PersonaProtocolBase implements PersonaProtocol {
   abstract getPriority(): number;
   abstract connect(session?: Session): Promise<Session>;
   abstract disconnect(): Promise<void>;
-  abstract send(message: Message): Promise<void>;
+  abstract send(message: Array<PersonaMessage> | PersonaMessage): Promise<void>;
 
   public onTransaction(_: PersonaTransaction) {}
 }

package/src/protocol/rest.ts

@@ -1,5 +1,5 @@
 import { PersonaProtocolBase } from './base';
-import { Message, PersonaResponse, Session, ProtocolStatus, PersonaProtocolBaseConfig } from '../types';
+import { PersonaResponse, Session, ProtocolStatus, PersonaProtocolBaseConfig, PersonaMessage } from '../types';
 
 type PersonaRESTProtocolConfig = PersonaProtocolBaseConfig & {
   apiUrl: string;
@@ -41,7 +41,7 @@ class PersonaRESTProtocol extends PersonaProtocolBase {
     this.session = session;
   }
 
-  public async send(message: Message): Promise<void> {
+  public async send(message: Array<PersonaMessage> | PersonaMessage): Promise<void> {
     const { apiUrl, apiKey, agentId } = this.config;
     const sessionId = this.session ?? 'new';
     const input = message;

package/src/protocol/transaction.ts

@@ -1,12 +1,12 @@
 import { PersonaProtocolBase } from './base';
 import {
-  Message,
   Session,
   ProtocolStatus,
   PersonaProtocolBaseConfig,
   PersonaTransaction,
   FunctionCall,
   ReadonlyJSONObject,
+  PersonaMessage,
 } from '../types';
 
 type FinishTransactionRequest = {
@@ -134,7 +134,7 @@ class PersonaTransactionProtocol extends PersonaProtocolBase {
     this.session = session;
   }
 
-  public async send(message: Message): Promise<void> {
+  public async send(message: Array<PersonaMessage> | PersonaMessage): Promise<void> {
     this.config.logger?.debug('Sending message:', message);
     throw new Error('Not implemented');
   }

package/src/protocol/webrtc.ts

@@ -1,5 +1,5 @@
 import { PersonaProtocolBase } from './base';
-import { Message, PersonaPayload, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
+import { PersonaMessage, PersonaPayload, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
 
 type AudioAnalysisData = {
   localAmplitude: number;
@@ -187,13 +187,13 @@ class PersonaWebRTCClient {
     };
   }
 
-  public sendMessage(message: string): void {
+  public sendMessage(message: Array<PersonaMessage> | PersonaMessage): void {
     if (!this.dataChannel) {
       this.config.logger?.warn('Data channel is not open, cannot send message');
       return;
     }
 
-    this.dataChannel.send(message);
+    this.dataChannel.send(JSON.stringify({ type: 'request', payload: message }));
     this.config.logger?.info('Sent message:', message);
   }
 
@@ -322,12 +322,12 @@ class PersonaWebRTCProtocol extends PersonaProtocolBase {
     this.config?.logger?.debug('Disconnected from WebRTC');
   }
 
-  public send(message: Message): Promise<void> {
+  public send(message: Array<PersonaMessage> | PersonaMessage): Promise<void> {
     if (this.status !== 'connected') {
       return Promise.reject(new Error('Not connected'));
     }
 
-    this.webRTCClient.sendMessage(message as string);
+    this.webRTCClient.sendMessage(message);
     return Promise.resolve();
   }
 }

package/src/protocol/websocket.ts

@@ -1,4 +1,4 @@
-import { Message, PersonaPayload, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
+import { PersonaMessage, PersonaPayload, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
 import { PersonaProtocolBase } from './base';
 
 type PersonaWebSocketProtocolConfig = PersonaProtocolBaseConfig & {
@@ -86,7 +86,7 @@ class PersonaWebSocketProtocol extends PersonaProtocolBase {
     return Promise.resolve();
   }
 
-  public send(message: Message): Promise<void> {
+  public send(message: Array<PersonaMessage> | PersonaMessage): Promise<void> {
     if (this.webSocket && this.status === 'connected') {
       this.webSocket.send(JSON.stringify({ type: 'request', payload: message }));
       return Promise.resolve();