@applica-software-guru/persona-chat-sdk 0.1.102

package/playground/src/hooks/theme.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark' | 'auto';
+const STORAGE_KEY = 'persona_theme_preference';
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined' || !window.matchMedia) return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function useColorScheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return (stored as Theme) || 'auto';
+    } catch {
+      return 'auto';
+    }
+  });
+
+  const apply = useCallback((t: Theme) => {
+    const root = document.documentElement;
+    const effective = t === 'auto' ? getSystemTheme() : t;
+    if (effective === 'dark') root.classList.add('dark');
+    else root.classList.remove('dark');
+  }, []);
+
+  useEffect(() => {
+    // Apply on mount and whenever theme changes
+    apply(theme);
+
+    // Listen to system changes when in 'auto' mode
+    let mql: MediaQueryList | null = null;
+    const onChange = () => {
+      if (theme === 'auto') apply('auto');
+    };
+
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      mql = window.matchMedia('(prefers-color-scheme: dark)');
+      if (mql.addEventListener) mql.addEventListener('change', onChange);
+      else mql.addListener(onChange as any);
+    }
+
+    return () => {
+      if (!mql) return;
+      if (mql.removeEventListener) mql.removeEventListener('change', onChange);
+      else mql.removeListener(onChange as any);
+    };
+  }, [theme, apply]);
+
+  const setThemeAndPersist = useCallback((t: Theme) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, t);
+    } catch {}
+    setTheme(t);
+  }, []);
+
+  const toggle = useCallback(() => {
+    console.log('Toggling theme from');
+    setTheme((prev) => {
+      const next = prev === 'dark' ? 'light' : prev === 'light' ? 'auto' : 'dark';
+      try {
+        localStorage.setItem(STORAGE_KEY, next);
+      } catch {}
+      return next;
+    });
+  }, []);
+
+  return { theme, setTheme: setThemeAndPersist, toggle } as const;
+}

package/playground/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/playground/src/lib/utils.ts

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

package/playground/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { Chat } from './chat';
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <Chat />
+  </React.StrictMode>,
+);

package/playground/src/styles.css

@@ -0,0 +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/playground/src/tools.ts

@@ -0,0 +1,149 @@
+/**
+ * Example Tool Library
+ *
+ * This file demonstrates how to define and export a library of example tools
+ * using the Persona SDK's createTool utility. These tools can be imported
+ * and used in PersonaRuntimeProvider or other parts of the application to
+ * showcase or test tool integration.
+ */
+
+import { createTool, PersonaTools } from '@applica-software-guru/persona-chat-sdk';
+
+const toolLibrary = [
+  createTool({
+    name: 'set_field_value',
+    title: 'Set Field Value',
+    description: 'Sets the value of a specified field in the current form.',
+    parameters: {
+      name: { type: 'string', description: 'The name of the field to set', required: true },
+      value: { type: 'string', description: 'The value to set for the field', required: true },
+    },
+    output: {
+      success: { type: 'boolean', description: 'Indicates if the field value was set successfully' },
+    },
+    implementation: async (name: string, value: string) => {
+      console.log({ name, value });
+      const field = document.querySelector(`[name="${name}"]`);
+      if (field) {
+        (field as HTMLInputElement).value = value;
+        return { success: true };
+      }
+      console.error(`Field with name "${name}" not found.`);
+      return { success: false };
+    },
+  }),
+  createTool({
+    name: 'sum',
+    title: 'Sum two numbers',
+    description: 'Sums two numbers and returns the result.',
+    parameters: {
+      a: { type: 'number', description: 'First number to sum', required: true },
+      b: { type: 'number', description: 'Second number to sum', required: true },
+    },
+    output: {
+      result: { type: 'number', description: 'Sum of the two numbers' },
+    },
+    implementation: async (a: number, b: number) => {
+      const result = a + b;
+      return { result };
+    },
+  }),
+  createTool({
+    name: 'concat',
+    title: 'Concatenate two strings',
+    description: 'Concatenates two strings and returns the result.',
+    parameters: {
+      str1: { type: 'string', description: 'First string to concatenate', required: true },
+      str2: { type: 'string', description: 'Second string to concatenate', required: true },
+    },
+    output: {
+      result: { type: 'string', description: 'Concatenated result of the two strings' },
+    },
+    implementation: async (str1: string, str2: string) => {
+      const result = str1 + str2;
+      return { result };
+    },
+  }),
+  // User agent tool:
+  createTool({
+    name: 'userAgent',
+    title: 'Get User Agent',
+    description: 'Retrieves the user agent string from the client.',
+    parameters: {},
+    output: {
+      result: { type: 'string', description: 'User agent string' },
+    },
+    implementation: async () => {
+      return { result: navigator.userAgent };
+    },
+  }),
+  // Navigate to URL tool:
+  createTool({
+    name: 'navigateTo',
+    title: 'Navigate to URL',
+    description: 'Navigates the browser to a specified URL.',
+    parameters: {
+      url: { type: 'string', description: 'The URL to navigate to', required: true },
+    },
+    output: {
+      success: { type: 'boolean', description: 'Indicates if navigation was successful' },
+    },
+    implementation: async (url: string) => {
+      window.location.href = url;
+      return { success: true };
+    },
+  }),
+  // Get current URL tool:
+  createTool({
+    name: 'getCurrentUrl',
+    title: 'Get Current URL',
+    description: 'Retrieves the current browser URL.',
+    parameters: {},
+    output: {
+      url: { type: 'string', description: 'Current browser URL' },
+    },
+    implementation: async () => {
+      return { url: window.location.href };
+    },
+  }),
+
+  // Current client date and time tool:
+  createTool({
+    name: 'getCurrentDateTime',
+    title: 'Get Current Date and Time',
+    description: 'Retrieves the current date and time from the client.',
+    parameters: {},
+    output: {
+      dateTime: { type: 'string', description: 'Current date and time in ISO format' },
+    },
+    implementation: async () => {
+      return { dateTime: new Date().toISOString() };
+    },
+  }),
+];
+
+const tools: PersonaTools = {
+  sum: function (a: number, b: number) {
+    const result = a + b;
+    return { result };
+  },
+  concat: function (str1: string, str2: string) {
+    const result = str1 + str2;
+    return { result };
+  },
+  navigateTo: function (url: string) {
+    window.location.href = url;
+    return { success: true };
+  },
+  getUserAgent: function () {
+    return { result: navigator.userAgent };
+  },
+  getCurrentUrl: function () {
+    return { url: window.location.href };
+  },
+  getCurrentDateTime: function () {
+    return { dateTime: new Date().toISOString() };
+  },
+};
+
+export { toolLibrary, tools };

package/playground/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/preview-build.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+# This script automates the process of building and publishing a preview version of the npm package.
+# When executed as ./preview.sh <tag-name>, it creates and publishes a new version of the package
+# with the format @applica-software-guru/persona-chat-sdk@0.1.0-<tag-name>.
+# The script updates the package version with the specified tag, builds the project,
+# and publishes it to the npm registry with the given preview tag.
+# Usage: ./preview.sh <tag-name>
+# Example: ./preview.sh beta
+
+if [ -z "$1" ]; then
+  echo "Usage: $0 <preview-tag>"
+  exit 1
+fi
+
+PREVIEW_TAG=$1
+
+echo "Creating preview version with tag: $PREVIEW_TAG"
+
+npm run build
+
+npm --no-git-tag-version version "$PREVIEW_TAG" -m "$PREVIEW_TAG"
+
+npm publish --access public

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './runtime';
+export * from './logging';
+export * from './protocol';
+export * from './types';
+export * from './tools';
+export * from './storage';
+export * from './projects';

package/src/logging.ts

@@ -0,0 +1,34 @@
+interface PersonaLogger {
+  log: (message: string, ...args: unknown[]) => void;
+  info: (message: string, ...args: unknown[]) => void;
+  warn: (message: string, ...args: unknown[]) => void;
+  error: (message: string, ...args: unknown[]) => void;
+  debug: (message: string, ...args: unknown[]) => void;
+}
+
+class PersonaConsoleLogger implements PersonaLogger {
+  prefix = '[Persona]';
+
+  log(message: string, ...args: unknown[]) {
+    console.log(`${this.prefix} - ${message}`, ...args);
+  }
+
+  info(message: string, ...args: unknown[]) {
+    console.info(`${this.prefix} - ${message}`, ...args);
+  }
+
+  warn(message: string, ...args: unknown[]) {
+    console.warn(`${this.prefix} - ${message}`, ...args);
+  }
+
+  error(message: string, ...args: unknown[]) {
+    console.error(`${this.prefix} - ${message}`, ...args);
+  }
+
+  debug(message: string, ...args: unknown[]) {
+    console.debug(`${this.prefix} - ${message}`, ...args);
+  }
+}
+
+export { PersonaConsoleLogger };
+export type { PersonaLogger };

package/src/messages.ts

@@ -0,0 +1,202 @@
+import { PersonaMessage } from './types';
+import { FileMessagePart, ThreadMessageLike, MessageStatus } from '@assistant-ui/react';
+
+let messageIdCounter = 0;
+
+export function generateMessageId(): string {
+  return `msg_${Date.now()}_${messageIdCounter++}`;
+}
+
+export function ensureMessageId(message: PersonaMessage): PersonaMessage {
+  // Convert thought to reasoning type
+  if (message.thought) {
+    message = { ...message, type: 'reasoning' };
+  }
+
+  if (!message.id) {
+    return {
+      ...message,
+      id: generateMessageId(),
+      createdAt: message.createdAt || new Date(),
+    };
+  }
+  if (!message.createdAt) {
+    return { ...message, createdAt: new Date() };
+  }
+  return message;
+}
+
+function removeEmptyMessages(messages: PersonaMessage[]): PersonaMessage[] {
+  return messages.filter((message) => {
+    if (message.role === 'assistant' && !message.functionCalls && !message.file && !message.image) {
+      if (!message.text || message.text.trim() === '') {
+        return false;
+      }
+    }
+    return true;
+  });
+}
+function parseMessages(messages: PersonaMessage[]): PersonaMessage[] {
+  const outputMessages: PersonaMessage[] = [];
+  let currentMessage: PersonaMessage | null = null;
+
+  for (let message of messages) {
+    // Ensure every message has an ID
+    message = ensureMessageId(message);
+
+    if (message.type === 'transaction') {
+      continue;
+    }
+
+    if (message.file) {
+      if (currentMessage) {
+        outputMessages.push(currentMessage);
+        currentMessage = null;
+      }
+      outputMessages.push(message);
+      continue;
+    } else if (message.functionCalls) {
+      if (currentMessage) {
+        // Drop empty assistant messages that precede function calls (streaming artifacts)
+        const isEmptyAssistant =
+          currentMessage.role === 'assistant' &&
+          (!currentMessage.text || currentMessage.text.trim() === '') &&
+          !currentMessage.file &&
+          !currentMessage.image;
+        if (!isEmptyAssistant) {
+          outputMessages.push(currentMessage);
+        }
+      }
+      outputMessages.push(message);
+      currentMessage = null;
+    } else if (message.functionResponse) {
+      outputMessages[outputMessages.length - 1] = {
+        ...outputMessages[outputMessages.length - 1],
+        functionResponse: message.functionResponse,
+      };
+    } else if (
+      currentMessage &&
+      message.type === currentMessage.type &&
+      message.protocol === currentMessage.protocol &&
+      currentMessage.role === message.role &&
+      // CRITICAL: Only merge if the new message has the same ID (streaming chunks)
+      // OR if the current message doesn't have a finishReason yet (still streaming)
+      // This preserves branches while allowing streaming to work
+      (message.id === currentMessage.id || !currentMessage.finishReason)
+    ) {
+      // Merge streaming chunks
+      currentMessage.text += message.text;
+      currentMessage.file = currentMessage.file || message.file;
+      currentMessage.finishReason = message.finishReason || currentMessage.finishReason;
+      // Keep the ID of the first chunk
+      currentMessage.id = currentMessage.id || message.id;
+      currentMessage.sources = currentMessage.sources ? [...(currentMessage.sources || []), ...(message.sources || [])] : message.sources;
+    } else {
+      // Different message or current is complete - don't merge
+      if (currentMessage) {
+        outputMessages.push(currentMessage);
+      }
+      currentMessage = {
+        ...message,
+        text: message.file ? '' : message.text,
+        finishReason: message.file ? undefined : message.finishReason,
+      };
+    }
+  }
+
+  if (currentMessage) {
+    outputMessages.push(currentMessage);
+  }
+  const cleanMessages = removeEmptyMessages(outputMessages);
+  return cleanMessages;
+}
+
+function convertMessage(message: PersonaMessage): ThreadMessageLike {
+  const files = message.file
+    ? [
+        {
+          type: 'file',
+          data: message.file.url,
+          mimeType: message.file.contentType,
+        } as FileMessagePart,
+      ]
+    : [];
+
+  // Determine message status for assistant messages
+  let messageStatus: MessageStatus | undefined;
+
+  if (message.role === 'assistant' || message.role === 'function') {
+    if (message.status) {
+      // Use existing status if provided
+      messageStatus = message.status as any;
+    } else if (message.finishReason === 'stop') {
+      messageStatus = { type: 'complete', reason: 'stop' } as const;
+    } else if (message.finishReason === 'function_call') {
+      messageStatus = { type: 'complete', reason: 'stop' } as const;
+    } else if (!message.finishReason) {
+      // Message is still being generated - this will trigger optimistic updates
+      messageStatus = undefined; // Let the runtime handle in-progress state
+    }
+  }
+
+  // Handle function/tool calls
+  if (message.role === 'function') {
+    const result: ThreadMessageLike = {
+      id: message.id!,
+      role: 'assistant',
+      createdAt: message.createdAt,
+      content:
+        message.functionCalls?.map((call) => ({
+          type: 'tool-call',
+          toolName: call.name,
+          toolCallId: call.id || `tool_${Date.now()}`,
+          args: call.args,
+          result: message.functionResponse?.result,
+        })) ?? [],
+      metadata: {
+        ...message.metadata,
+        custom: {
+          protocol: message.protocol,
+          sessionId: message.sessionId,
+          sources: message.sources,
+          ...message.metadata?.custom,
+        },
+      },
+    };
+
+    if (messageStatus) {
+      return { ...result, status: messageStatus };
+    }
+    return result;
+  }
+
+  // Handle regular messages
+  const baseMessage: ThreadMessageLike = {
+    id: message.id!,
+    role: message.role,
+    createdAt: message.createdAt,
+    content:
+      message.type === 'reasoning'
+        ? [{ type: 'reasoning' as any, text: message.text }, ...files]
+        : [{ type: 'text', text: message.text }, ...files],
+    metadata: {
+      ...message.metadata,
+      custom: {
+        protocol: message.protocol,
+        sessionId: message.sessionId,
+        sources: message.sources,
+        type: message.type,
+        ...message.metadata?.custom,
+      },
+    },
+  };
+
+  // Add status only for assistant messages
+  if (message.role === 'assistant' && messageStatus) {
+    return { ...baseMessage, status: messageStatus };
+  }
+
+  return baseMessage;
+}
+
+export { parseMessages, convertMessage, removeEmptyMessages };