@hef2024/llmasaservice-ui 0.16.8

package/src/hooks/useAgentRegistry.ts

@@ -0,0 +1,349 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+
+/**
+ * Agent metadata returned from the LLMAsAService API
+ */
+export interface AgentMetadata {
+  id: string;
+  projectId: string;
+  groupId?: string;
+  displayTitle?: string;
+  displayTheme?: 'light' | 'dark';
+  displayPlaceholder?: string;
+  displayInitialMessageOrPrompt?: string;
+  displayStartMessageOrPrompt?: 'message' | 'prompt';
+  displayPromptTemplate?: string;
+  displayActions?: string;
+  displayFollowOnPrompts?: string;
+  displayShowEmailButton?: boolean;
+  displayShowSaveButton?: boolean;
+  displayShowCallToAction?: boolean;
+  displayCallToActionButtonText?: string;
+  displayCallToActionEmailAddress?: string;
+  displayCallToActionEmailSubject?: string;
+  displayHideInitialPrompt?: boolean;
+  displayScrollToEnd?: boolean;
+  displayWidth?: string;
+  displayHeight?: string;
+  cssUrl?: string;
+  data?: string;
+  createConversationOnFirstChat?: boolean;
+  customerEmailCaptureMode?: 'HIDE' | 'OPTIONAL' | 'REQUIRED';
+  customerEmailCapturePlaceholder?: string;
+  description?: string;
+}
+
+export interface MCPServer {
+  id: string;
+  name: string;
+  status: 'active' | 'inactive';
+  executionMode: 'CLIENT' | 'SERVER';
+  url?: string;
+}
+
+export interface AgentProfile {
+  status: 'idle' | 'loading' | 'ready' | 'error';
+  metadata?: AgentMetadata;
+  mcpServers?: MCPServer[];
+  error?: string;
+}
+
+export interface AgentRegistryState {
+  agents: Record<string, AgentProfile>;
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * Local overrides for agent display properties
+ */
+export interface AgentLocalOverride {
+  localName?: string;
+  avatarUrl?: string;
+}
+
+interface UseAgentRegistryOptions {
+  url?: string;
+  autoFetch?: boolean;
+  localOverrides?: Record<string, AgentLocalOverride>;
+}
+
+const resolveApiEndpoint = (baseUrl: string, agentId: string): string => {
+  const apiRoot = baseUrl.endsWith('dev')
+    ? 'https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev'
+    : 'https://api.llmasaservice.io';
+  return `${apiRoot}/agents/${agentId}`;
+};
+
+/**
+ * Hook to fetch and cache metadata for multiple agents
+ */
+export function useAgentRegistry(
+  agentIds: string[],
+  options: UseAgentRegistryOptions = {}
+) {
+  const { url = 'https://chat.llmasaservice.io', autoFetch = true, localOverrides = {} } = options;
+
+  const [state, setState] = useState<AgentRegistryState>({
+    agents: {},
+    isLoading: false,
+    error: null,
+  });
+
+  // Fetch a single agent's metadata
+  const fetchAgentMetadata = useCallback(
+    async (agentId: string, signal?: AbortSignal): Promise<AgentProfile> => {
+      const endpoint = resolveApiEndpoint(url, agentId);
+
+      try {
+        // Fetch agent metadata
+        const response = await fetch(endpoint, {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+          signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch agent ${agentId}: ${response.status}`);
+        }
+
+        const data = await response.json();
+        const agentData = Array.isArray(data) ? data[0] : data;
+
+        if (!agentData) {
+          throw new Error(`No data returned for agent ${agentId}`);
+        }
+
+        // Fetch MCP servers
+        let mcpServers: MCPServer[] = [];
+        try {
+          const mcpResponse = await fetch(`${endpoint}/mcp`, {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+            signal,
+          });
+
+          if (mcpResponse.ok) {
+            const mcpData = await mcpResponse.json();
+            if (Array.isArray(mcpData)) {
+              mcpServers = mcpData.filter(
+                (mcp: MCPServer) =>
+                  mcp.status === 'active' && mcp.executionMode !== 'SERVER'
+              );
+            }
+          }
+        } catch {
+          // MCP fetch is optional, continue without it
+        }
+
+        return {
+          status: 'ready',
+          metadata: { ...agentData, id: agentId },
+          mcpServers,
+        };
+      } catch (error: any) {
+        if (error.name === 'AbortError') {
+          return { status: 'idle' };
+        }
+        return {
+          status: 'error',
+          error: error.message || `Failed to load agent ${agentId}`,
+        };
+      }
+    },
+    [url]
+  );
+
+  // Fetch all agents
+  const fetchAllAgents = useCallback(async () => {
+    if (agentIds.length === 0) return;
+
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+    const controller = new AbortController();
+    const results: Record<string, AgentProfile> = {};
+
+    // Initialize all agents as loading
+    agentIds.forEach((id) => {
+      results[id] = { status: 'loading' };
+    });
+
+    setState((prev) => ({
+      ...prev,
+      agents: { ...prev.agents, ...results },
+    }));
+
+    // Fetch all agents in parallel
+    const promises = agentIds.map(async (agentId) => {
+      const profile = await fetchAgentMetadata(agentId, controller.signal);
+      return { agentId, profile };
+    });
+
+    const responses = await Promise.all(promises);
+
+    const finalAgents: Record<string, AgentProfile> = {};
+    responses.forEach(({ agentId, profile }) => {
+      finalAgents[agentId] = profile;
+    });
+
+    setState({
+      agents: finalAgents,
+      isLoading: false,
+      error: null,
+    });
+
+    return () => controller.abort();
+  }, [agentIds, fetchAgentMetadata]);
+
+  // Auto-fetch on mount and when agentIds change
+  useEffect(() => {
+    if (!autoFetch) return;
+
+    const abortController = new AbortController();
+
+    // Only fetch agents that aren't already loaded
+    const agentsToFetch = agentIds.filter(
+      (id) => !state.agents[id] || state.agents[id].status === 'idle'
+    );
+
+    if (agentsToFetch.length === 0) return;
+
+    fetchAllAgents();
+
+    return () => abortController.abort();
+  }, [agentIds.join(','), autoFetch]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Get a single agent's profile
+  const getAgent = useCallback(
+    (agentId: string): AgentProfile | undefined => {
+      return state.agents[agentId];
+    },
+    [state.agents]
+  );
+
+  // Check if a specific agent is ready
+  const isAgentReady = useCallback(
+    (agentId: string): boolean => {
+      return state.agents[agentId]?.status === 'ready';
+    },
+    [state.agents]
+  );
+
+  // Build agent awareness instructions for a given agent
+  const buildAgentAwarenessInstructions = useCallback(
+    (currentAgentId: string): string => {
+      const otherAgents = agentIds
+        .filter((id) => id !== currentAgentId)
+        .map((id) => {
+          const profile = state.agents[id];
+          if (profile?.status !== 'ready' || !profile.metadata) return null;
+          
+          const override = localOverrides[id];
+          const name = override?.localName || profile.metadata.displayTitle || id;
+          const description = profile.metadata.description || 'An AI assistant';
+          return { id, name, description };
+        })
+        .filter((a): a is { id: string; name: string; description: string } => a !== null);
+
+      if (otherAgents.length === 0) return '';
+
+      // Use the first other agent for the example
+      const exampleAgent = otherAgents[0];
+      const exampleMarker = exampleAgent 
+        ? `[SUGGEST_AGENT:${exampleAgent.id}|${exampleAgent.name}|${exampleAgent.description}]`
+        : '[SUGGEST_AGENT:agent-id|Agent Name|Brief reason]';
+
+      return `
+## Available Agent Team
+
+You are part of a team of AI agents. When a user's request would be better handled by a specialized agent, you should suggest switching.
+
+### Other Agents Available:
+${otherAgents.map(a => `- **${a.name}** (ID: ${a.id}): ${a.description}`).join('\n')}
+
+### How to Suggest an Agent Switch:
+When you believe another agent would better serve the user, naturally suggest it in your response and include this exact marker format at the end of your message:
+[SUGGEST_AGENT:actual-agent-id|Agent Name|Brief reason why]
+
+IMPORTANT: Use the actual agent ID from the list above, not a placeholder.
+
+Example: "I think ${exampleAgent?.name || 'another agent'} would be perfect for this! ${exampleMarker}"
+`.trim();
+    },
+    [agentIds, state.agents, localOverrides]
+  );
+
+  // Get list of ready agents
+  const readyAgents = useMemo(() => {
+    return agentIds.filter((id) => state.agents[id]?.status === 'ready');
+  }, [agentIds, state.agents]);
+
+  // Get list of agents with their display info
+  const agentList = useMemo(() => {
+    return agentIds.map((id) => {
+      const profile = state.agents[id];
+      const metadata = profile?.metadata;
+      const override = localOverrides[id];
+      
+      // Use localName if provided, otherwise try API fields, fallback to ID
+      const name = 
+        override?.localName ||
+        metadata?.displayTitle ||
+        (metadata?.displayInitialMessageOrPrompt 
+          ? extractAgentNameFromMessage(metadata.displayInitialMessageOrPrompt) 
+          : null) ||
+        id;
+      
+      return {
+        id,
+        name,
+        description: metadata?.description || '',
+        status: profile?.status || 'idle',
+        isReady: profile?.status === 'ready',
+        avatarUrl: override?.avatarUrl,
+        localName: override?.localName,
+      };
+    });
+  }, [agentIds, state.agents, localOverrides]);
+
+  return {
+    ...state,
+    getAgent,
+    isAgentReady,
+    fetchAllAgents,
+    buildAgentAwarenessInstructions,
+    readyAgents,
+    agentList,
+  };
+}
+
+// Helper to extract agent name from initial message like "I'm your FocusedFit Navigator..."
+function extractAgentNameFromMessage(message: string): string | null {
+  // Try patterns like "I'm your X", "I'm X", "I am your X", "I am X"
+  const patterns = [
+    /I'm your\s+([^.!?,]+)/i,
+    /I am your\s+([^.!?,]+)/i,
+    /I'm\s+([^.!?,]+)/i,
+    /I am\s+([^.!?,]+)/i,
+    /Welcome! I'm\s+([^.!?,]+)/i,
+    /Hi! I'm\s+([^.!?,]+)/i,
+    /Hello! I'm\s+([^.!?,]+)/i,
+  ];
+  
+  for (const pattern of patterns) {
+    const match = message.match(pattern);
+    if (match && match[1]) {
+      // Clean up the name
+      const name = match[1].trim();
+      // Don't return if it looks like the rest of the message
+      if (name.split(' ').length <= 4) {
+        return name;
+      }
+    }
+  }
+  
+  return null;
+}
+
+export default useAgentRegistry;
+

package/src/hooks/useConversationStore.ts

@@ -0,0 +1,313 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+
+/**
+ * A single conversation entry
+ */
+export interface Conversation {
+  id: string;
+  agentId: string;
+  title: string;
+  preview: string;
+  createdAt: string;
+  updatedAt: string;
+  history: Record<string, { content: string; callId: string }>;
+}
+
+/**
+ * Grouped conversations by time period
+ */
+export interface ConversationGroup {
+  label: string;
+  conversations: Conversation[];
+}
+
+interface UseConversationStoreOptions {
+  namespace?: string;
+  maxConversations?: number;
+  autoPersist?: boolean;
+}
+
+const STORAGE_VERSION = 'v1';
+
+const generateId = (): string => {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  }
+  return `conv-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+};
+
+const getStorageKey = (namespace: string): string => {
+  return `ai-agent-panel:${namespace}:conversations:${STORAGE_VERSION}`;
+};
+
+const readFromStorage = (namespace: string): Conversation[] => {
+  if (typeof window === 'undefined') return [];
+  
+  try {
+    const raw = localStorage.getItem(getStorageKey(namespace));
+    if (!raw) return [];
+    
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    
+    return parsed;
+  } catch {
+    return [];
+  }
+};
+
+const writeToStorage = (namespace: string, conversations: Conversation[]): void => {
+  if (typeof window === 'undefined') return;
+  
+  try {
+    localStorage.setItem(getStorageKey(namespace), JSON.stringify(conversations));
+  } catch {
+    // Storage full or unavailable
+  }
+};
+
+const deriveTitle = (history: Record<string, { content: string; callId: string }>): string => {
+  const prompts = Object.keys(history);
+  if (prompts.length === 0) return 'New Conversation';
+  
+  // Get first user prompt (strip timestamp prefix if present)
+  let firstPrompt = prompts[0] || 'New Conversation';
+  
+  // Remove ISO timestamp prefix (e.g., "2025-01-01T14:30:00.000Z:")
+  const isoMatch = firstPrompt.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:(.+)/);
+  if (isoMatch && isoMatch[1]) {
+    firstPrompt = isoMatch[1];
+  }
+  
+  // Remove legacy timestamp prefix (e.g., "1234567890:")
+  const legacyMatch = firstPrompt.match(/^\d+:(.+)/);
+  if (legacyMatch && legacyMatch[1]) {
+    firstPrompt = legacyMatch[1];
+  }
+  
+  // Truncate if too long
+  if (firstPrompt.length > 50) {
+    return firstPrompt.slice(0, 47) + '...';
+  }
+  
+  return firstPrompt;
+};
+
+const derivePreview = (history: Record<string, { content: string; callId: string }>): string => {
+  const entries = Object.entries(history);
+  if (entries.length === 0) return '';
+  
+  // Get last response
+  const lastEntry = entries[entries.length - 1];
+  if (!lastEntry) return '';
+  
+  const lastResponse = lastEntry[1].content;
+  if (!lastResponse) return '';
+  
+  // Strip markdown and truncate
+  const plainText = lastResponse
+    .replace(/```[\s\S]*?```/g, '[code]')
+    .replace(/`[^`]+`/g, '[code]')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/[#*_~]/g, '')
+    .trim();
+  
+  if (plainText.length > 100) {
+    return plainText.slice(0, 97) + '...';
+  }
+  
+  return plainText;
+};
+
+const groupByTimePeriod = (conversations: Conversation[]): ConversationGroup[] => {
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfYesterday = new Date(startOfToday);
+  startOfYesterday.setDate(startOfYesterday.getDate() - 1);
+  const startOfWeek = new Date(startOfToday);
+  startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());
+
+  const groups: ConversationGroup[] = [
+    { label: 'Today', conversations: [] },
+    { label: 'Yesterday', conversations: [] },
+    { label: 'This Week', conversations: [] },
+    { label: 'Older', conversations: [] },
+  ];
+
+  conversations.forEach((conv) => {
+    const updatedAt = new Date(conv.updatedAt);
+    
+    if (updatedAt >= startOfToday) {
+      groups[0]!.conversations.push(conv);
+    } else if (updatedAt >= startOfYesterday) {
+      groups[1]!.conversations.push(conv);
+    } else if (updatedAt >= startOfWeek) {
+      groups[2]!.conversations.push(conv);
+    } else {
+      groups[3]!.conversations.push(conv);
+    }
+  });
+
+  // Only return groups that have conversations
+  return groups.filter((group) => group.conversations.length > 0);
+};
+
+/**
+ * Hook to manage conversation persistence and history
+ */
+export function useConversationStore(options: UseConversationStoreOptions = {}) {
+  const {
+    namespace = 'default',
+    maxConversations = 50,
+    autoPersist = true,
+  } = options;
+
+  const [conversations, setConversations] = useState<Conversation[]>(() =>
+    readFromStorage(namespace)
+  );
+  const [activeConversationId, setActiveConversationId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Persist to storage when conversations change
+  useEffect(() => {
+    if (autoPersist) {
+      writeToStorage(namespace, conversations);
+    }
+  }, [conversations, namespace, autoPersist]);
+
+  // Reload from storage when namespace changes
+  useEffect(() => {
+    setConversations(readFromStorage(namespace));
+    setActiveConversationId(null);
+  }, [namespace]);
+
+  // Get the active conversation
+  const activeConversation = useMemo(() => {
+    if (!activeConversationId) return null;
+    return conversations.find((c) => c.id === activeConversationId) || null;
+  }, [conversations, activeConversationId]);
+
+  // Filter conversations by search query
+  const filteredConversations = useMemo(() => {
+    if (!searchQuery.trim()) return conversations;
+    
+    const query = searchQuery.toLowerCase().trim();
+    return conversations.filter((conv) => {
+      const searchable = [conv.title, conv.preview].join(' ').toLowerCase();
+      return searchable.includes(query);
+    });
+  }, [conversations, searchQuery]);
+
+  // Group filtered conversations by time period
+  const groupedConversations = useMemo(() => {
+    // Sort by updatedAt descending
+    const sorted = [...filteredConversations].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    );
+    return groupByTimePeriod(sorted);
+  }, [filteredConversations]);
+
+  // Create a new conversation
+  const createConversation = useCallback(
+    (agentId: string, initialHistory?: Record<string, { content: string; callId: string }>): Conversation => {
+      const now = new Date().toISOString();
+      const history = initialHistory || {};
+      
+      const newConversation: Conversation = {
+        id: generateId(),
+        agentId,
+        title: deriveTitle(history),
+        preview: derivePreview(history),
+        createdAt: now,
+        updatedAt: now,
+        history,
+      };
+
+      setConversations((prev) => {
+        const updated = [newConversation, ...prev];
+        // Limit to maxConversations
+        return updated.slice(0, maxConversations);
+      });
+
+      setActiveConversationId(newConversation.id);
+      return newConversation;
+    },
+    [maxConversations]
+  );
+
+  // Update a conversation's history
+  const updateConversationHistory = useCallback(
+    (
+      conversationId: string,
+      history: Record<string, { content: string; callId: string }>
+    ) => {
+      setConversations((prev) =>
+        prev.map((conv) => {
+          if (conv.id !== conversationId) return conv;
+          
+          return {
+            ...conv,
+            history,
+            title: deriveTitle(history),
+            preview: derivePreview(history),
+            updatedAt: new Date().toISOString(),
+          };
+        })
+      );
+    },
+    []
+  );
+
+  // Delete a conversation
+  const deleteConversation = useCallback((conversationId: string) => {
+    setConversations((prev) => prev.filter((c) => c.id !== conversationId));
+    
+    if (activeConversationId === conversationId) {
+      setActiveConversationId(null);
+    }
+  }, [activeConversationId]);
+
+  // Select a conversation
+  const selectConversation = useCallback((conversationId: string | null) => {
+    setActiveConversationId(conversationId);
+  }, []);
+
+  // Get conversations for a specific agent
+  const getConversationsForAgent = useCallback(
+    (agentId: string): Conversation[] => {
+      return conversations.filter((c) => c.agentId === agentId);
+    },
+    [conversations]
+  );
+
+  // Clear all conversations
+  const clearAllConversations = useCallback(() => {
+    setConversations([]);
+    setActiveConversationId(null);
+  }, []);
+
+  // Start a new conversation (deselect current)
+  const startNewConversation = useCallback(() => {
+    setActiveConversationId(null);
+  }, []);
+
+  return {
+    conversations,
+    activeConversation,
+    activeConversationId,
+    filteredConversations,
+    groupedConversations,
+    searchQuery,
+    setSearchQuery,
+    createConversation,
+    updateConversationHistory,
+    deleteConversation,
+    selectConversation,
+    getConversationsForAgent,
+    clearAllConversations,
+    startNewConversation,
+  };
+}
+
+export default useConversationStore;
+