@chaaskit/client 0.1.0 → 0.1.2

package/src/components/ToolCallDisplay.tsx

@@ -19,6 +19,8 @@ const AUTO_APPROVE_LABELS: Record<AutoApproveReason, string> = {
   thread_allowed: 'Allowed for this chat',
 };
 
+const TOOL_UI_MESSAGE_SOURCE = 'chaaskit-tool-ui';
+
 // Generate the window.openai initialization script for OpenAI format resources
 function generateOpenAiScript(
   toolInput: Record<string, unknown>,
@@ -68,6 +70,46 @@ function generateOpenAiScript(
 </style>
 <script>
 (function() {
+  const MESSAGE_SOURCE = '${TOOL_UI_MESSAGE_SOURCE}';
+  let requestId = 0;
+  const pending = new Map();
+
+  function resolvePending(id, data) {
+    const entry = pending.get(id);
+    if (!entry) return;
+    pending.delete(id);
+    if (data && data.ok) {
+      entry.resolve(data.result);
+      return;
+    }
+    entry.resolve({ error: (data && data.error) || 'Tool UI bridge error' });
+  }
+
+  window.addEventListener('message', (event) => {
+    const data = event.data || {};
+    if (data.source !== MESSAGE_SOURCE || !data.id) return;
+    resolvePending(data.id, data);
+  });
+
+  function sendToParent(type, payload, timeoutMs = 15000) {
+    return new Promise((resolve) => {
+      const id = String(Date.now()) + '-' + String(requestId++);
+      pending.set(id, { resolve });
+      try {
+        window.parent.postMessage({ source: MESSAGE_SOURCE, type, id, payload }, '*');
+      } catch (err) {
+        pending.delete(id);
+        resolve({ error: 'Unable to reach host window' });
+        return;
+      }
+      setTimeout(() => {
+        if (!pending.has(id)) return;
+        pending.delete(id);
+        resolve({ error: 'Tool UI request timed out' });
+      }, timeoutMs);
+    });
+  }
+
   // Initialize window.openai with the OpenAI Apps SDK spec
   window.openai = {
     // Core globals
@@ -92,17 +134,20 @@ function generateOpenAiScript(
     // API methods
     callTool: async (name, args) => {
       console.log('window.openai.callTool called:', { name, args });
-      // TODO: Implement actual tool calling via parent window messaging
-      return {
-        content: [{ type: 'text', text: 'Tool calling not yet implemented' }],
-        isError: false
-      };
+      const response = await sendToParent('callTool', { name, args });
+      if (response && response.error) {
+        return {
+          content: [{ type: 'text', text: response.error }],
+          isError: true
+        };
+      }
+      return response || { content: [{ type: 'text', text: 'No response from host' }], isError: true };
     },
 
     sendFollowUpMessage: async (args) => {
       console.log('window.openai.sendFollowUpMessage called:', args);
-      // TODO: Implement via parent window messaging
-      return {};
+      const response = await sendToParent('sendFollowUpMessage', args);
+      return response && response.error ? { error: response.error } : (response || {});
     },
 
     openExternal: (payload) => {
@@ -114,27 +159,41 @@ function generateOpenAiScript(
 
     requestDisplayMode: async (args) => {
       console.log('window.openai.requestDisplayMode called:', args);
-      return { mode: args.mode };
+      const response = await sendToParent('requestDisplayMode', args);
+      if (response && response.error) {
+        return { mode: args.mode };
+      }
+      return response || { mode: args.mode };
     },
 
     setWidgetState: async (state) => {
       console.log('window.openai.setWidgetState called:', state);
       window.openai.widgetState = state;
-      return {};
+      const response = await sendToParent('setWidgetState', state);
+      return response && response.error ? {} : (response || {});
     },
 
     requestClose: () => {
       console.log('window.openai.requestClose called');
+      sendToParent('requestClose', {});
     },
 
     getFileDownloadUrl: async ({ fileId }) => {
       console.log('window.openai.getFileDownloadUrl called:', fileId);
-      return { url: '' };
+      const response = await sendToParent('getFileDownloadUrl', { fileId });
+      if (response && response.error) {
+        return { url: '' };
+      }
+      return response || { url: '' };
     },
 
     uploadFile: async (file) => {
       console.log('window.openai.uploadFile called:', file);
-      return { fileId: '' };
+      const response = await sendToParent('uploadFile', { file });
+      if (response && response.error) {
+        return { fileId: '' };
+      }
+      return response || { fileId: '' };
     }
   };
 
@@ -199,6 +258,38 @@ export function UIResourceWidget({ uiResource, theme }: { uiResource: UIResource
 }
 
 export default function ToolCallDisplay({ toolCall, toolResult, isPending, uiResource, hideUiResource, autoApproveReason }: ToolCallDisplayProps) {
+  useEffect(() => {
+    async function handleMessage(event: MessageEvent) {
+      const data = event.data || {};
+      if (data.source !== TOOL_UI_MESSAGE_SOURCE || !data.id) return;
+
+      const targetOrigin = event.origin && event.origin !== 'null' ? event.origin : '*';
+
+      try {
+        const handler = (window as unknown as { chaaskitToolUiHandler?: (payload: unknown) => Promise<unknown> }).chaaskitToolUiHandler;
+        const result = typeof handler === 'function'
+          ? await handler({ type: data.type, payload: data.payload })
+          : { error: 'Tool UI bridge not configured' };
+
+        const sourceWindow = event.source as Window | null;
+        sourceWindow?.postMessage(
+          { source: TOOL_UI_MESSAGE_SOURCE, id: data.id, ok: true, result },
+          targetOrigin
+        );
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Tool UI bridge error';
+        const sourceWindow = event.source as Window | null;
+        sourceWindow?.postMessage(
+          { source: TOOL_UI_MESSAGE_SOURCE, id: data.id, ok: false, error: message },
+          targetOrigin
+        );
+      }
+    }
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
   // Check if we have HTML content to render
   const hasHtmlResource = !hideUiResource && uiResource?.text &&
     (uiResource.mimeType?.includes('html') || uiResource.text.trim().startsWith('<'));

package/src/components/tool-renderers/DocumentListRenderer.tsx

@@ -0,0 +1,44 @@
+import type { ToolCall, ToolResult } from '@chaaskit/shared';
+import { getTextContent } from './utils';
+
+interface DocumentSummary {
+  id?: string;
+  path?: string;
+  name?: string;
+  mimeType?: string;
+  charCount?: number;
+  teamId?: string | null;
+  projectId?: string | null;
+}
+
+export default function DocumentListRenderer({ toolCall, toolResult }: { toolCall: ToolCall; toolResult: ToolResult }) {
+  const structured = toolResult.structuredContent as { documents?: DocumentSummary[] } | undefined;
+  const documents = structured?.documents ?? [];
+  const fallback = getTextContent(toolResult.content);
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm font-semibold text-text-primary">Documents</div>
+      {documents.length > 0 ? (
+        <ul className="space-y-2">
+          {documents.map((doc, index) => (
+            <li key={doc.id ?? doc.path ?? index} className="rounded-md border border-border bg-background px-3 py-2">
+              <div className="text-sm font-medium text-text-primary">{doc.path ?? doc.name ?? 'Untitled document'}</div>
+              <div className="text-xs text-text-muted">
+                {doc.mimeType ?? 'text/plain'}
+                {typeof doc.charCount === 'number' ? ` • ${doc.charCount} chars` : ''}
+                {doc.teamId ? ' • team' : ''}
+                {doc.projectId ? ' • project' : ''}
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <div className="text-sm text-text-secondary">
+          {fallback ?? 'No documents found.'}
+        </div>
+      )}
+      <div className="text-xs text-text-muted">Tool: {toolCall.toolName}</div>
+    </div>
+  );
+}

package/src/components/tool-renderers/DocumentReadRenderer.tsx

@@ -0,0 +1,33 @@
+import type { ToolCall, ToolResult } from '@chaaskit/shared';
+import { getTextContent } from './utils';
+
+interface ReadSummary {
+  path?: string;
+  offset?: number;
+  linesReturned?: number;
+  totalLines?: number;
+  truncated?: boolean;
+}
+
+export default function DocumentReadRenderer({ toolCall, toolResult }: { toolCall: ToolCall; toolResult: ToolResult }) {
+  const structured = toolResult.structuredContent as ReadSummary | undefined;
+  const fallback = getTextContent(toolResult.content);
+  const rangeText = structured
+    ? `Lines ${Number(structured.offset ?? 0) + 1}-${Number(structured.offset ?? 0) + Number(structured.linesReturned ?? 0)} of ${structured.totalLines ?? 'unknown'}`
+    : null;
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm font-semibold text-text-primary">Document Preview</div>
+      {structured ? (
+        <div className="rounded-md border border-border bg-background px-3 py-2 text-sm text-text-secondary">
+          <div className="font-medium text-text-primary">{structured.path ?? 'Document'}</div>
+          {rangeText && <div className="text-xs text-text-muted">{rangeText}{structured.truncated ? ' (truncated)' : ''}</div>}
+        </div>
+      ) : (
+        <div className="text-sm text-text-secondary">{fallback ?? 'No structured document details.'}</div>
+      )}
+      <div className="text-xs text-text-muted">Tool: {toolCall.toolName}</div>
+    </div>
+  );
+}

package/src/components/tool-renderers/DocumentSaveRenderer.tsx

@@ -0,0 +1,32 @@
+import type { ToolCall, ToolResult } from '@chaaskit/shared';
+import { getTextContent } from './utils';
+
+interface SaveSummary {
+  success?: boolean;
+  path?: string;
+  id?: string;
+  charCount?: number;
+}
+
+export default function DocumentSaveRenderer({ toolCall, toolResult }: { toolCall: ToolCall; toolResult: ToolResult }) {
+  const structured = toolResult.structuredContent as SaveSummary | undefined;
+  const fallback = getTextContent(toolResult.content);
+  const success = structured?.success !== false && !toolResult.isError;
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm font-semibold text-text-primary">Save Document</div>
+      {structured ? (
+        <div className={`rounded-md border px-3 py-2 text-sm ${success ? 'border-success/30 bg-success/10 text-success' : 'border-error/30 bg-error/10 text-error'}`}>
+          <div className="font-medium">{success ? 'Saved' : 'Failed'}</div>
+          {structured.path && <div className="text-xs">Path: {structured.path}</div>}
+          {structured.id && <div className="text-xs">ID: {structured.id}</div>}
+          {typeof structured.charCount === 'number' && <div className="text-xs">Size: {structured.charCount} chars</div>}
+        </div>
+      ) : (
+        <div className="text-sm text-text-secondary">{fallback ?? 'No structured save data.'}</div>
+      )}
+      <div className="text-xs text-text-muted">Tool: {toolCall.toolName}</div>
+    </div>
+  );
+}

package/src/components/tool-renderers/DocumentSearchRenderer.tsx

@@ -0,0 +1,33 @@
+import type { ToolCall, ToolResult } from '@chaaskit/shared';
+import { getTextContent } from './utils';
+
+interface SearchSummary {
+  path?: string;
+  query?: string;
+  matchCount?: number;
+  matchLines?: number[];
+}
+
+export default function DocumentSearchRenderer({ toolCall, toolResult }: { toolCall: ToolCall; toolResult: ToolResult }) {
+  const structured = toolResult.structuredContent as SearchSummary | undefined;
+  const fallback = getTextContent(toolResult.content);
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm font-semibold text-text-primary">Document Search</div>
+      {structured ? (
+        <div className="rounded-md border border-border bg-background px-3 py-2 text-sm text-text-secondary">
+          <div className="font-medium text-text-primary">{structured.path ?? 'Document'}</div>
+          <div className="text-xs text-text-muted">Query: {structured.query ?? 'unknown'}</div>
+          <div className="text-xs text-text-muted">Matches: {structured.matchCount ?? 0}</div>
+          {structured.matchLines && structured.matchLines.length > 0 && (
+            <div className="text-xs text-text-muted">Lines: {structured.matchLines.join(', ')}</div>
+          )}
+        </div>
+      ) : (
+        <div className="text-sm text-text-secondary">{fallback ?? 'No structured search data.'}</div>
+      )}
+      <div className="text-xs text-text-muted">Tool: {toolCall.toolName}</div>
+    </div>
+  );
+}

package/src/components/tool-renderers/index.ts

@@ -0,0 +1,36 @@
+import { clientRegistry } from '../../extensions/registry';
+import DocumentListRenderer from './DocumentListRenderer';
+import DocumentReadRenderer from './DocumentReadRenderer';
+import DocumentSearchRenderer from './DocumentSearchRenderer';
+import DocumentSaveRenderer from './DocumentSaveRenderer';
+
+clientRegistry.registerTool({
+  name: 'list_documents',
+  description: 'Render document list results',
+  resultRenderer: DocumentListRenderer,
+});
+
+clientRegistry.registerTool({
+  name: 'read_document',
+  description: 'Render document read results',
+  resultRenderer: DocumentReadRenderer,
+});
+
+clientRegistry.registerTool({
+  name: 'search_in_document',
+  description: 'Render document search results',
+  resultRenderer: DocumentSearchRenderer,
+});
+
+clientRegistry.registerTool({
+  name: 'save_document',
+  description: 'Render document save results',
+  resultRenderer: DocumentSaveRenderer,
+});
+
+export {
+  DocumentListRenderer,
+  DocumentReadRenderer,
+  DocumentSearchRenderer,
+  DocumentSaveRenderer,
+};

package/src/components/tool-renderers/utils.ts

@@ -0,0 +1,7 @@
+import type { MCPContent } from '@chaaskit/shared';
+
+export function getTextContent(content?: MCPContent[]): string | null {
+  if (!content) return null;
+  const firstText = content.find((item) => item.type === 'text' && typeof item.text === 'string');
+  return firstText?.text ?? null;
+}

package/src/contexts/AuthContext.tsx

@@ -20,9 +20,14 @@ interface AuthContextType {
   user: UserSession | null;
   isLoading: boolean;
   login: (email: string, password: string) => Promise<LoginResult>;
-  register: (email: string, password: string, name?: string) => Promise<RegisterResult>;
+  register: (
+    email: string,
+    password: string,
+    name?: string,
+    options?: { inviteToken?: string; referralCode?: string }
+  ) => Promise<RegisterResult>;
   logout: () => Promise<void>;
-  sendMagicLink: (email: string) => Promise<void>;
+  sendMagicLink: (email: string, inviteToken?: string) => Promise<void>;
   verifyEmail: (code: string) => Promise<void>;
   resendVerification: () => Promise<void>;
 }
@@ -59,12 +64,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return { requiresVerification: response.requiresVerification ?? false };
   }
 
-  async function register(email: string, password: string, name?: string): Promise<RegisterResult> {
+  async function register(
+    email: string,
+    password: string,
+    name?: string,
+    options?: { inviteToken?: string; referralCode?: string }
+  ): Promise<RegisterResult> {
     const response = await api.post<{
       user: UserSession;
       token: string;
       requiresVerification?: boolean;
-    }>('/api/auth/register', { email, password, name });
+    }>('/api/auth/register', { email, password, name, ...options });
     setUser(response.user);
     return { requiresVerification: response.requiresVerification ?? false };
   }
@@ -74,8 +84,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setUser(null);
   }
 
-  async function sendMagicLink(email: string) {
-    await api.post('/api/auth/magic-link', { email });
+  async function sendMagicLink(email: string, inviteToken?: string) {
+    await api.post('/api/auth/magic-link', { email, inviteToken });
   }
 
   async function verifyEmail(code: string) {

package/src/contexts/ConfigContext.tsx

@@ -1,12 +1,32 @@
 import { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
-import type { AppConfig } from '@chaaskit/shared';
+import type { PublicAppConfig } from '@chaaskit/shared';
+
+// Declare global window property for SSR-injected config
+declare global {
+  interface Window {
+    __CHAASKIT_CONFIG__?: PublicAppConfig;
+  }
+}
+
+/**
+ * Get config injected via ConfigScript in the HTML head.
+ * This allows the config to be available immediately on page load,
+ * avoiding flash of default values.
+ */
+function getInjectedConfig(): PublicAppConfig | undefined {
+  if (typeof window !== 'undefined' && window.__CHAASKIT_CONFIG__) {
+    return window.__CHAASKIT_CONFIG__;
+  }
+  return undefined;
+}
 
 // Default config - used as fallback while loading
-const defaultConfig: AppConfig = {
+const defaultConfig: PublicAppConfig = {
   app: {
     name: 'AI Chat',
     description: 'Your AI assistant',
     url: 'http://localhost:5173',
+    basePath: '/chat',
   },
   ui: {
     welcomeTitle: 'Welcome to AI Chat',
@@ -90,27 +110,15 @@ const defaultConfig: AppConfig = {
       enabled: true,
       expiresInMinutes: 15,
     },
-  },
-  agent: {
-    type: 'built-in',
-    provider: 'anthropic',
-    model: 'claude-sonnet-4-20250514',
-    systemPrompt: 'You are a helpful AI assistant.',
-    maxTokens: 4096,
+    gating: {
+      mode: 'open',
+      waitlistEnabled: false,
+    },
+    isAdmin: false,
   },
   payments: {
     enabled: false,
     provider: 'stripe',
-    plans: [
-      {
-        id: 'free',
-        name: 'Free',
-        type: 'free',
-        params: {
-          monthlyMessageLimit: 20,
-        },
-      },
-    ],
   },
   legal: {
     privacyPolicyUrl: '/privacy',
@@ -139,7 +147,6 @@ const defaultConfig: AppConfig = {
   },
   promptTemplates: {
     enabled: true,
-    builtIn: [],
     allowUserTemplates: true,
   },
   teams: {
@@ -147,9 +154,6 @@ const defaultConfig: AppConfig = {
   },
   documents: {
     enabled: false,
-    storage: {
-      provider: 'database',
-    },
     maxFileSizeMB: 10,
     hybridThreshold: 1000,
     acceptedTypes: ['text/plain', 'text/markdown', 'application/json'],
@@ -161,10 +165,19 @@ const defaultConfig: AppConfig = {
   api: {
     enabled: false,
   },
+  credits: {
+    enabled: false,
+    expiryEnabled: false,
+    promoEnabled: false,
+  },
+  metering: {
+    enabled: false,
+    recordPromptCompletion: true,
+  },
 };
 
 interface ConfigContextValue {
-  config: AppConfig;
+  config: PublicAppConfig;
   configLoaded: boolean;
 }
 
@@ -173,11 +186,30 @@ const ConfigContext = createContext<ConfigContextValue>({
   configLoaded: false,
 });
 
-export function ConfigProvider({ children }: { children: ReactNode }) {
-  const [config, setConfig] = useState<AppConfig>(defaultConfig);
-  const [configLoaded, setConfigLoaded] = useState(false);
+interface ConfigProviderProps {
+  children: ReactNode;
+  /**
+   * Initial config to use immediately, avoiding a flash of default values.
+   * If provided, the config will not be fetched from /api/config.
+   * Useful when config is available from SSR loaders.
+   */
+  initialConfig?: PublicAppConfig;
+}
+
+export function ConfigProvider({ children, initialConfig }: ConfigProviderProps) {
+  // Priority: 1. initialConfig prop, 2. injected window config, 3. defaults + fetch
+  const injectedConfig = getInjectedConfig();
+  const preloadedConfig = initialConfig || injectedConfig;
+
+  const [config, setConfig] = useState<PublicAppConfig>(
+    preloadedConfig ? { ...defaultConfig, ...preloadedConfig } : defaultConfig
+  );
+  const [configLoaded, setConfigLoaded] = useState(!!preloadedConfig);
 
   useEffect(() => {
+    // Skip fetching if we have preloaded config
+    if (preloadedConfig) return;
+
     async function loadConfig() {
       try {
         const response = await fetch('/api/config');
@@ -196,7 +228,7 @@ export function ConfigProvider({ children }: { children: ReactNode }) {
       }
     }
     loadConfig();
-  }, []);
+  }, [preloadedConfig]);
 
   return (
     <ConfigContext.Provider value={{ config, configLoaded }}>