@applica-software-guru/persona-sdk 0.1.45 → 0.1.47

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

@@ -3,12 +3,25 @@ import {
   ActionBarPrimitive,
   BranchPickerPrimitive,
   ComposerPrimitive,
+  FileContentPart,
+  ImageContentPart,
   MessagePrimitive,
   ReasoningContentPartProps,
   ThreadPrimitive,
 } from '@assistant-ui/react';
-import { useCallback, useMemo, type FC } from 'react';
-import { ArrowDownIcon, CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, SendHorizontalIcon, MicIcon } from 'lucide-react';
+import { JSX, useCallback, useMemo, type FC } from 'react';
+import {
+  ArrowDownIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  SendHorizontalIcon,
+  MicIcon,
+  FileIcon,
+  ImageIcon,
+  ArchiveIcon,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 import { Button } from '@/components/ui/button';
@@ -16,7 +29,7 @@ import { MarkdownText } from '@/components/assistant-ui/markdown-text';
 import { TooltipIconButton } from '@/components/assistant-ui/tooltip-icon-button';
 import { ToolFallback } from '@/components/assistant-ui/tool-fallback';
 
-import { usePersonaRuntimeWebRTCProtocol } from '@applica-software-guru/persona-sdk';
+import { usePersonaRuntimeEndpoint, usePersonaRuntimeWebRTCProtocol } from '@applica-software-guru/persona-sdk';
 
 export const Thread: FC = () => {
   return (
@@ -172,6 +185,47 @@ const Reasoning: FC<ReasoningContentPartProps> = ({ text }: ReasoningContentPart
   return <div className="text-sm text-muted-foreground break-words whitespace-pre-wrap">{text}</div>;
 };
 
+const Image: FC<ImageContentPart> = ({ image }: ImageContentPart) => {
+  const baseEndpoint = usePersonaRuntimeEndpoint();
+  return (
+    <div className="flex items-center gap-2 border rounded-lg border-muted bg-muted p-4 my-2">
+      <img src={`${baseEndpoint}/files/${image}`} alt="Image" className="max-h-96 max-w-full rounded-lg object-cover" />
+    </div>
+  );
+};
+
+const File: FC<FileContentPart> = ({ data, mimeType }) => {
+  const isImage = useMemo(() => mimeType.startsWith('image/'), [mimeType]);
+  if (isImage) {
+    return <Image image={data} type="image" />;
+  }
+  const fileName = useMemo(() => {
+    const parts = data.split('/');
+    return parts[parts.length - 1];
+  }, [data]);
+  const baseEndpoint = usePersonaRuntimeEndpoint();
+  const getIconByMimeType = (mimeType: string) => {
+    const iconMap: Record<string, JSX.Element> = {
+      'application/pdf': <FileIcon />,
+      'image/png': <ImageIcon />,
+      'image/jpeg': <ImageIcon />,
+      'application/zip': <ArchiveIcon />,
+    };
+
+    return iconMap[mimeType] || <FileIcon />;
+  };
+  const icon = getIconByMimeType(mimeType);
+
+  return (
+    <div className="flex items-center gap-2 border rounded-lg border-muted bg-muted p-4 my-2">
+      <div className="text-muted-foreground">{icon}</div>
+      <a target="_blank" href={`${baseEndpoint}/files/${data}`} download={fileName} className="text-md text-muted-foreground">
+        {fileName}
+      </a>
+    </div>
+  );
+};
+
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="grid grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] relative w-full max-w-[var(--thread-max-width)] py-4">
@@ -179,6 +233,7 @@ const AssistantMessage: FC = () => {
         <MessagePrimitive.Content
           components={{
             Text: MarkdownText,
+            File,
             Reasoning,
             tools: {
               Fallback: ToolFallback,

package/src/messages.ts

@@ -1,5 +1,5 @@
 import { PersonaMessage } from './types';
-import { ThreadMessageLike } from '@assistant-ui/react';
+import { FileContentPart, ThreadMessageLike } from '@assistant-ui/react';
 
 function removeEmptyMessages(messages: PersonaMessage[]): PersonaMessage[] {
   return messages.filter((message) => {
@@ -14,6 +14,9 @@ function parseMessages(messages: PersonaMessage[]): PersonaMessage[] {
   let currentMessage: PersonaMessage | null = null;
 
   for (const message of messages) {
+    if (message.type === 'transaction') {
+      continue;
+    }
     if (message.type === 'reasoning') {
       if (currentMessage != null) {
         outputMessages.push(currentMessage);
@@ -37,6 +40,7 @@ function parseMessages(messages: PersonaMessage[]): PersonaMessage[] {
       (currentMessage.role === message.role || message.finishReason === 'stop')
     ) {
       currentMessage.text += message.text;
+      currentMessage.files = [...(currentMessage.files ?? []), ...(message.files ?? [])];
     } else {
       if (currentMessage) {
         outputMessages.push(currentMessage);
@@ -50,10 +54,20 @@ function parseMessages(messages: PersonaMessage[]): PersonaMessage[] {
   if (currentMessage) {
     outputMessages.push(currentMessage);
   }
-  return removeEmptyMessages(outputMessages);
+  const cleanMessages = removeEmptyMessages(outputMessages);
+  return cleanMessages;
 }
 
 function convertMessage(message: PersonaMessage): ThreadMessageLike {
+  const files =
+    message.files?.map(
+      (file) =>
+        ({
+          type: 'file',
+          data: file.url,
+          mimeType: file.contentType,
+        } as FileContentPart),
+    ) ?? [];
   if (message.role === 'function') {
     return {
       id: message.id!,
@@ -72,7 +86,10 @@ function convertMessage(message: PersonaMessage): ThreadMessageLike {
   return {
     id: message.id!,
     role: message.role,
-    content: message.type === 'reasoning' ? [{ type: 'reasoning', text: message.text }] : [{ type: 'text', text: message.text }],
+    content:
+      message.type === 'reasoning'
+        ? [{ type: 'reasoning', text: message.text }, ...files]
+        : [{ type: 'text', text: message.text }, ...files],
   };
 }
 

package/src/protocol/base.ts

@@ -1,4 +1,13 @@
-import { Message, MessageListenerCallback, PersonaMessage, PersonaProtocol, ProtocolStatus, Session, StatusChangeCallback } from '../types';
+import {
+  Message,
+  MessageListenerCallback,
+  PersonaPayload,
+  PersonaProtocol,
+  PersonaTransaction,
+  ProtocolStatus,
+  Session,
+  StatusChangeCallback,
+} from '../types';
 
 abstract class PersonaProtocolBase implements PersonaProtocol {
   abstract status: ProtocolStatus;
@@ -19,10 +28,10 @@ abstract class PersonaProtocolBase implements PersonaProtocol {
     this.session = session;
   }
 
-  public async notifyMessage(message: PersonaMessage): Promise<void> {
+  public async notifyMessage(message: PersonaPayload): Promise<void> {
     this.messageCallbacks.forEach((callback) => callback(message));
   }
-  public async notifyMessages(messages: PersonaMessage[]): Promise<void> {
+  public async notifyMessages(messages: PersonaPayload[]): Promise<void> {
     messages.forEach((message) => {
       this.messageCallbacks.forEach((callback) => callback(message));
     });
@@ -50,6 +59,8 @@ abstract class PersonaProtocolBase implements PersonaProtocol {
   abstract connect(session?: Session): Promise<Session>;
   abstract disconnect(): Promise<void>;
   abstract send(message: Message): Promise<void>;
+
+  public onTransaction(_: PersonaTransaction) {}
 }
 
 export { PersonaProtocolBase };

package/src/protocol/index.ts

@@ -2,3 +2,4 @@ export * from './rest';
 export * from './base';
 export * from './websocket';
 export * from './webrtc';
+export * from './transaction';

package/src/protocol/rest.ts

@@ -56,7 +56,12 @@ class PersonaRESTProtocol extends PersonaProtocolBase {
       },
     });
     const personaResponse = (await response.json()) as PersonaResponse;
-    this.notifyMessages(personaResponse.response.messages);
+    this.notifyMessages(
+      personaResponse.response.messages.map((payload) => ({
+        type: 'message',
+        payload,
+      })),
+    );
   }
 }
 

package/src/protocol/transaction.ts

@@ -0,0 +1,154 @@
+import { PersonaProtocolBase } from './base';
+import {
+  Message,
+  Session,
+  ProtocolStatus,
+  PersonaProtocolBaseConfig,
+  PersonaTransaction,
+  FunctionCall,
+  ReadonlyJSONObject,
+} from '../types';
+
+type FinishTransactionRequest = {
+  success: boolean;
+  output: any;
+  error: string | null;
+};
+
+class PersonaTransactionsManager {
+  private config: PersonaTransactionProtocolConfig;
+
+  constructor(config: PersonaTransactionProtocolConfig) {
+    this.config = config;
+  }
+
+  async complete(transaction: PersonaTransaction, request: FinishTransactionRequest): Promise<void> {
+    await this.persist(transaction, { ...request, success: true });
+    this.config.logger?.debug('Transaction completed:', transaction);
+  }
+
+  async fail(transaction: PersonaTransaction, request: FinishTransactionRequest): Promise<void> {
+    await this.persist(transaction, { ...request, success: false });
+    this.config.logger?.debug('Transaction failed:', { ...transaction, ...request });
+  }
+
+  async persist(transaction: PersonaTransaction, request: FinishTransactionRequest): Promise<void> {
+    await fetch(`${this.config.apiUrl}/transactions/${transaction.id}`, {
+      body: JSON.stringify(request),
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        'x-persona-apikey': this.config.apiKey,
+      },
+    });
+  }
+}
+
+export type PersonaToolCallback = (args: ReadonlyJSONObject | undefined) => void;
+export type PersonaTools = {
+  [key: string]: PersonaToolCallback;
+};
+
+class PersonaPersistableTransaction {
+  private transaction: PersonaTransaction;
+  private manager: PersonaTransactionsManager;
+
+  constructor(transaction: PersonaTransaction, manager: PersonaTransactionsManager) {
+    this.transaction = transaction;
+    this.manager = manager;
+  }
+
+  public getFunctionCall(): FunctionCall | null {
+    return this.transaction.functionCall;
+  }
+
+  async invoke(tools: PersonaTools): Promise<void> {
+    const functionCall = this.transaction.functionCall;
+    if (!functionCall) {
+      await this.fail('No function call found');
+      return;
+    }
+    const functionName = functionCall.name;
+    const functionArgs = functionCall.args;
+    const tool = tools[functionName];
+    if (!tool) {
+      await this.fail(`Tool ${functionName} not found`);
+      return;
+    }
+    try {
+      const result = await tool(functionArgs);
+      await this.complete({ date: new Date().toISOString(), result });
+    } catch (error) {
+      await this.fail(`Error executing tool ${functionName}: ${error}`);
+    }
+  }
+  async complete(output: any): Promise<void> {
+    await this.manager.complete(this.transaction, { success: true, output, error: null });
+  }
+  async fail(error: string): Promise<void> {
+    await this.manager.fail(this.transaction, { success: false, output: null, error });
+  }
+}
+
+type PersonaTransactionCallback = (transaction: PersonaPersistableTransaction) => void;
+
+type PersonaTransactionProtocolConfig = PersonaProtocolBaseConfig & {
+  apiUrl: string;
+  onTransaction: PersonaTransactionCallback;
+};
+
+class PersonaTransactionProtocol extends PersonaProtocolBase {
+  status: ProtocolStatus;
+  autostart: boolean;
+  session: Session;
+  config: PersonaTransactionProtocolConfig;
+  notify: boolean = true;
+
+  constructor(config: PersonaTransactionProtocolConfig) {
+    super();
+    this.config = config;
+    this.status = 'disconnected';
+    this.autostart = true;
+  }
+
+  public getName(): string {
+    return 'transaction';
+  }
+
+  public getPriority(): number {
+    return 0;
+  }
+
+  public async connect(session: Session): Promise<Session> {
+    this.setStatus('connected');
+    return session;
+  }
+
+  public async disconnect(): Promise<void> {
+    this.setStatus('disconnected');
+    this.session = null;
+  }
+
+  public async syncSession(session: Session): Promise<void> {
+    this.session = session;
+  }
+
+  public async send(message: Message): Promise<void> {
+    this.config.logger?.debug('Sending message:', message);
+    throw new Error('Not implemented');
+  }
+
+  public onTransaction(transaction: PersonaTransaction): void {
+    if (!this.config.onTransaction) {
+      this.config.logger?.error('Transaction protocol config is not set');
+      return;
+    }
+    const manager = new PersonaTransactionsManager(this.config);
+    const persistable = new PersonaPersistableTransaction(transaction, manager);
+    this.config.onTransaction(persistable);
+  }
+}
+
+export { PersonaTransactionProtocol };
+export type { PersonaTransactionProtocolConfig, FinishTransactionRequest, PersonaPersistableTransaction, PersonaTransactionCallback };

package/src/protocol/webrtc.ts

@@ -1,5 +1,5 @@
 import { PersonaProtocolBase } from './base';
-import { Message, PersonaMessage, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
+import { Message, PersonaPayload, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
 
 type AudioAnalysisData = {
   localAmplitude: number;
@@ -274,11 +274,8 @@ class PersonaWebRTCProtocol extends PersonaProtocolBase {
     this.autostart = config?.autostart ?? false;
     this.webRTCClient = new PersonaWebRTCClient(config);
     this.webRTCClient.addMessageCallback((msg: MessageEvent) => {
-      config.logger?.debug('Received data message:', msg.data);
-      const data = JSON.parse(msg.data) as { type: 'message' | unknown; payload: PersonaMessage | unknown };
-      if (data.type === 'message') {
-        this.notifyMessage(data.payload as PersonaMessage);
-      }
+      const data = JSON.parse(msg.data) as PersonaPayload;
+      this.notifyMessage(data);
     });
   }
 

package/src/protocol/websocket.ts

@@ -1,4 +1,4 @@
-import { Message, PersonaMessage, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
+import { Message, PersonaPayload, PersonaProtocolBaseConfig, ProtocolStatus, Session } from '../types';
 import { PersonaProtocolBase } from './base';
 
 type PersonaWebSocketProtocolConfig = PersonaProtocolBaseConfig & {
@@ -56,14 +56,8 @@ class PersonaWebSocketProtocol extends PersonaProtocolBase {
       this.setStatus('connected');
     });
     this.webSocket.addEventListener('message', (event) => {
-      const data = JSON.parse(event.data) as { type: 'message' | unknown; payload: PersonaMessage | unknown };
-
-      if (data.type !== 'message') {
-        return;
-      }
-      const message = data.payload as PersonaMessage & { thought?: string };
-
-      this.notifyMessage(message?.thought ? { role: 'assistant', type: 'reasoning', text: message.thought } : message);
+      const data = JSON.parse(event.data) as PersonaPayload;
+      this.notifyMessage(data);
     });
     this.webSocket.addEventListener('close', () => {
       this.setStatus('disconnected');

package/src/runtime.tsx

@@ -3,16 +3,20 @@ import { useExternalStoreRuntime, AppendMessage, AssistantRuntimeProvider } from
 import {
   PersonaConfig,
   PersonaMessage,
+  PersonaPayload,
   PersonaProtocol,
   PersonaProtocolBaseConfig,
   PersonaResponse,
+  PersonaTransaction,
   ProtocolStatus,
   Session,
 } from './types';
 import { parseMessages, convertMessage } from './messages';
 import {
+  PersonaPersistableTransaction,
   PersonaRESTProtocol,
   PersonaRESTProtocolConfig,
+  PersonaTransactionProtocol,
   PersonaWebRTCProtocol,
   PersonaWebRTCProtocolConfig,
   PersonaWebSocketProtocol,
@@ -49,7 +53,7 @@ function PersonaRuntimeProviderInner({
       const baseEndpoint = dev ? 'localhost:8000' : 'persona.applica.guru/api';
       const baseEndpointProtocol = dev ? 'http' : 'https';
       const baseWebSocketProtocol = dev ? 'ws' : 'wss';
-      const availableProtocols = Object.keys(_protocols).map((key) => {
+      let availableProtocols = Object.keys(_protocols).map((key) => {
         switch (key) {
           case 'rest':
             const restConfig: PersonaProtocolBaseConfig | true | undefined = _protocols[key];
@@ -88,6 +92,20 @@ function PersonaRuntimeProviderInner({
             throw new Error(`Unknown protocol: ${key}`);
         }
       });
+
+      if (config.tools) {
+        availableProtocols.push(
+          new PersonaTransactionProtocol({
+            apiUrl: `${baseEndpointProtocol}://${baseEndpoint}`,
+            apiKey: config.apiKey,
+            agentId: config.agentId,
+            onTransaction: async (transaction: PersonaPersistableTransaction) => {
+              await transaction.invoke(config.tools!);
+            },
+            logger,
+          }),
+        );
+      }
       return availableProtocols;
     }
     throw new Error('Invalid protocols configuration');
@@ -109,8 +127,15 @@ function PersonaRuntimeProviderInner({
         protocolsStatus.set(protocol.getName(), status);
         setProtocolsStatus(new Map(protocolsStatus));
       });
-      protocol.addMessageListener((message: PersonaMessage) => {
-        setMessages((currentConversation) => parseMessages([...currentConversation, ...[{ ...message, protocol: protocol.getName() }]]));
+      protocol.addMessageListener((message: PersonaPayload) => {
+        if (message.type === 'message') {
+          const personaMessage = message.payload as PersonaMessage;
+          setMessages((currentConversation) =>
+            parseMessages([...currentConversation, ...[{ ...personaMessage, protocol: protocol.getName() }]]),
+          );
+        } else if (message.type === 'transaction') {
+          protocols.filter((p) => p !== protocol).forEach((p) => p.onTransaction(message.payload as PersonaTransaction));
+        }
       });
       if (protocol.autostart && protocol.status === 'disconnected') {
         logger?.debug(`Connecting to protocol: ${protocol.getName()}`);
@@ -206,9 +231,22 @@ function usePersonaRuntimeProtocol(protocol: string): PersonaProtocol | null {
   };
 }
 
+function usePersonaRuntimeEndpoint(): string {
+  const context = useContext(PersonaRuntimeContext);
+  if (!context) {
+    throw new Error('usePersonaRuntimeEndpoint must be used within a PersonaRuntimeProvider');
+  }
+  for (const protocol of context.protocols) {
+    if (protocol.getName() === 'rest') {
+      return (protocol as PersonaRESTProtocol).config.apiUrl;
+    }
+  }
+  throw new Error('REST protocol not found');
+}
+
 function usePersonaRuntimeWebRTCProtocol(): PersonaWebRTCProtocol | null {
   return usePersonaRuntimeProtocol('webrtc') as PersonaWebRTCProtocol;
 }
 
-export { PersonaRuntimeProvider, usePersonaRuntime, usePersonaRuntimeProtocol, usePersonaRuntimeWebRTCProtocol };
+export { PersonaRuntimeProvider, usePersonaRuntimeEndpoint, usePersonaRuntime, usePersonaRuntimeProtocol, usePersonaRuntimeWebRTCProtocol };
 export type { PersonaMessage, PersonaResponse };

package/src/types.ts

@@ -1,3 +1,4 @@
+import { PersonaTools } from 'src/protocol';
 import { PersonaLogger } from './logging';
 import { ReactNode } from 'react';
 
@@ -17,18 +18,60 @@ export type FunctionResponse = {
   function_call_id: string;
 };
 
+export type PersonaFile = {
+  name: string;
+  url: string;
+  contentType: string;
+};
+
+export type PersonaSession = {
+  id: string;
+  code: string;
+  projectId: string;
+  agentId: string;
+  currentAgentId: string;
+  userId: string;
+  status: 'active' | 'finished';
+  type: 'realtime' | 'async';
+  createdAt: string;
+  finishedAt: string | null;
+};
+
+export type PersonaAgentContext = {
+  data: unknown;
+  files: PersonaFile[];
+  session: PersonaSession;
+};
+
+export type PersonaTransaction = {
+  id: string;
+  projectId: string;
+  sessionId: string;
+  status: 'pending' | 'completed' | 'failed';
+  error: string | null;
+  functionCall: FunctionCall | null;
+  context: PersonaAgentContext;
+};
+
 export type PersonaMessage = {
   id?: string | null;
   protocol?: string;
+  thought?: string;
   text: string;
-  type: 'reasoning' | 'text';
+  type: 'reasoning' | 'text' | 'transaction';
   role: 'user' | 'assistant' | 'function';
+  files?: PersonaFile[];
   sessionId?: string;
   finishReason?: 'stop' | 'function_call';
   functionCalls?: FunctionCall[];
   functionResponse?: FunctionResponse;
 };
 
+export type PersonaPayload = {
+  type: 'message' | 'transaction';
+  payload: PersonaMessage | PersonaTransaction;
+};
+
 export type ModelResponse = {
   messages: PersonaMessage[];
 };
@@ -51,7 +94,7 @@ export type PersonaWebRTCConfig = PersonaBaseConfig & {
 export type Session = string | null | undefined;
 export type Message = string;
 
-export type MessageListenerCallback = (message: PersonaMessage) => void;
+export type MessageListenerCallback = (message: PersonaPayload) => void;
 export type StatusChangeCallback = (status: ProtocolStatus) => void;
 
 export type ProtocolStatus = 'disconnected' | 'connecting' | 'connected';
@@ -71,6 +114,8 @@ export interface PersonaProtocol {
   connect: (session?: Session) => Promise<Session>;
   disconnect: () => Promise<void>;
 
+  onTransaction: (transaction: PersonaTransaction) => void;
+
   setSession: (session: Session) => Promise<void>;
 
   send: (message: Message) => Promise<void>;
@@ -95,4 +140,6 @@ export type PersonaConfig = PersonaBaseConfig &
           webrtc?: PersonaProtocolBaseConfig | true;
           websocket?: PersonaProtocolBaseConfig | true;
         };
+
+    tools?: PersonaTools;
   };