@inkeep/agents-manage-ui 0.1.0

package/src/hooks/use-chat-activities-polling.ts

@@ -0,0 +1,145 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { ConversationDetail } from '@/components/traces/timeline/types';
+
+interface UseChatActivitiesPollingOptions {
+  conversationId: string;
+  pollingInterval?: number; // in milliseconds, defaults to 1000
+}
+
+interface UseChatActivitiesPollingReturn {
+  chatActivities: ConversationDetail | null;
+  isPolling: boolean;
+  error: string | null;
+  startPolling: () => void;
+  stopPolling: () => void;
+}
+
+export const useChatActivitiesPolling = ({
+  conversationId,
+  pollingInterval = 1000,
+}: UseChatActivitiesPollingOptions): UseChatActivitiesPollingReturn => {
+  const [chatActivities, setChatActivities] = useState<ConversationDetail | null>(null);
+  const [isPolling, setIsPolling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastActivityCount, setLastActivityCount] = useState(0);
+
+  const pollingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const isComponentMountedRef = useRef(true);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const fetchChatActivities = useCallback(async () => {
+    try {
+      setError(null);
+
+      // Cancel any previous request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      // Create new abort controller for this request
+      abortControllerRef.current = new AbortController();
+      const currentConversationId = conversationId; // Capture current ID
+
+      const response = await fetch(`/api/signoz/conversations/${currentConversationId}`, {
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        // If conversation doesn't exist yet, that's fine - just return
+        if (response.status === 404) return;
+        throw new Error('Failed to fetch chat activities');
+      }
+
+      const data: ConversationDetail = await response.json();
+
+      // Validate that the response is still for the current conversation
+      if (isComponentMountedRef.current && currentConversationId === conversationId) {
+        // Only update state if data actually changed (by checking activity count)
+        const newCount = data.activities?.length || 0;
+        if (newCount !== lastActivityCount) {
+          setChatActivities(data);
+          setLastActivityCount(newCount);
+        }
+      }
+    } catch (err) {
+      // Don't log abort errors as they are expected when cancelling requests
+      if (err instanceof Error && err.name === 'AbortError') {
+        return;
+      }
+
+      if (isComponentMountedRef.current) {
+        console.warn('Error fetching chat activities:', err);
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      }
+    }
+  }, [conversationId, lastActivityCount]);
+
+  // Start polling
+  const startPolling = useCallback(() => {
+    if (pollingIntervalRef.current) return; // Already polling
+
+    setIsPolling(true);
+
+    // Initial fetch
+    fetchChatActivities();
+
+    // Set up polling interval
+    pollingIntervalRef.current = setInterval(() => {
+      fetchChatActivities();
+    }, pollingInterval);
+  }, [fetchChatActivities, pollingInterval]);
+
+  // Stop polling
+  const stopPolling = useCallback(() => {
+    setIsPolling(false);
+    if (pollingIntervalRef.current) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+    // Cancel any pending requests
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    isComponentMountedRef.current = true;
+    return () => {
+      isComponentMountedRef.current = false;
+      stopPolling();
+    };
+  }, [stopPolling]);
+
+  // Reset chat activities and stop polling when conversationId changes
+  const prevConversationIdRef = useRef(conversationId);
+  useEffect(() => {
+    if (prevConversationIdRef.current !== conversationId) {
+      setChatActivities(null);
+      setLastActivityCount(0);
+      setError(null);
+
+      // Stop polling for old conversation
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+      setIsPolling(false);
+
+      prevConversationIdRef.current = conversationId;
+    }
+  });
+
+  return {
+    chatActivities,
+    isPolling,
+    error,
+    startPolling,
+    stopPolling,
+  };
+};

package/src/hooks/use-copy-to-clipboard.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+
+export interface useCopyToClipboardProps {
+  timeout?: number;
+}
+
+export function useCopyToClipboard({ timeout = 2000 }: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = React.useState<boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === 'undefined' || !navigator.clipboard?.writeText) {
+      return;
+    }
+
+    if (!value) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+}

package/src/hooks/use-cursor-to-end.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Custom hook that creates a ref for text input elements and automatically positions
+ * the cursor at the end of the text when the component mounts.
+ *
+ * Works with any element that has setSelectionRange method (input, textarea, etc.)
+ * and a value property.
+ *
+ * Useful for expanded/fullscreen text editing scenarios where you want
+ * the user to continue editing from where they left off.
+ *
+ * @example
+ * // For textarea elements
+ * const textareaRef = useCursorToEnd<HTMLTextAreaElement>()
+ * <textarea ref={textareaRef} />
+ *
+ * @example
+ * // For input elements
+ * const inputRef = useCursorToEnd<HTMLInputElement>()
+ * <input ref={inputRef} />
+ *
+ * @example
+ * // Generic usage (auto-inferred type)
+ * const ref = useCursorToEnd()
+ * <textarea ref={ref} />
+ *
+ * @returns A ref to attach to the text input element
+ */
+export function useCursorToEnd<
+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLTextAreaElement,
+>() {
+  const inputRef = useRef<T>(null);
+
+  useEffect(() => {
+    if (inputRef.current && typeof inputRef.current.setSelectionRange === 'function') {
+      const element = inputRef.current;
+      const textLength = element.value?.length || 0;
+      try {
+        element.setSelectionRange(textLength, textLength);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, []);
+
+  return inputRef;
+}

package/src/hooks/use-disclosure.ts

@@ -0,0 +1,15 @@
+'use client';
+
+import { useState } from 'react';
+
+export function useDisclosure(initial = false) {
+  const [value, setValue] = useState(initial);
+
+  return {
+    isOpen: value,
+    onClose: () => setValue(false),
+    onOpen: () => setValue(true),
+    onToggle: () => setValue((prev) => !prev),
+    setValue,
+  };
+}

package/src/hooks/use-graph-errors.ts

@@ -0,0 +1,98 @@
+/**
+ * Hook for accessing graph error state and utilities
+ */
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import { useCallback } from 'react';
+
+export interface ErrorHelpers {
+  hasFieldError: (fieldName: string) => boolean;
+  getFieldErrorMessage: (fieldName: string) => string | undefined;
+  getFirstErrorField: () => string | undefined;
+}
+
+export function useGraphErrors() {
+  const errors = useGraphStore((state) => state.errors);
+  const showErrors = useGraphStore((state) => state.showErrors);
+  const hasErrors = useGraphStore((state) => state.hasErrors);
+  const getNodeErrors = useGraphStore((state) => state.getNodeErrors);
+  const getEdgeErrors = useGraphStore((state) => state.getEdgeErrors);
+  const setErrors = useGraphStore((state) => state.setErrors);
+  const clearErrors = useGraphStore((state) => state.clearErrors);
+  const setShowErrors = useGraphStore((state) => state.setShowErrors);
+
+  const getNodeErrorCount = (nodeId: string): number => {
+    return getNodeErrors(nodeId).length;
+  };
+
+  const getEdgeErrorCount = (edgeId: string): number => {
+    return getEdgeErrors(edgeId).length;
+  };
+
+  const hasNodeErrors = (nodeId: string): boolean => {
+    return getNodeErrorCount(nodeId) > 0;
+  };
+
+  const hasEdgeErrors = (edgeId: string): boolean => {
+    return getEdgeErrorCount(edgeId) > 0;
+  };
+
+  const getFieldErrors = useCallback(
+    (nodeId: string): Record<string, string[]> => {
+      const nodeErrors = getNodeErrors(nodeId);
+      const fieldErrors: Record<string, string[]> = {};
+
+      for (const error of nodeErrors) {
+        if (!fieldErrors[error.field]) {
+          fieldErrors[error.field] = [];
+        }
+        fieldErrors[error.field].push(error.message);
+      }
+
+      return fieldErrors;
+    },
+    [getNodeErrors]
+  );
+
+  const hasFieldError = useCallback(
+    (nodeId: string, fieldName: string): boolean => {
+      const fieldErrors = getFieldErrors(nodeId);
+      return fieldName in fieldErrors;
+    },
+    [getFieldErrors]
+  );
+
+  const getFieldErrorMessage = useCallback(
+    (nodeId: string, fieldName: string): string | undefined => {
+      const fieldErrors = getFieldErrors(nodeId);
+      return fieldErrors[fieldName]?.[0];
+    },
+    [getFieldErrors]
+  );
+
+  const getFirstErrorField = useCallback(
+    (nodeId: string): string | undefined => {
+      const nodeErrors = getNodeErrors(nodeId);
+      return nodeErrors[0]?.field;
+    },
+    [getNodeErrors]
+  );
+
+  return {
+    errors,
+    showErrors,
+    hasErrors: hasErrors(),
+    getNodeErrors,
+    getEdgeErrors,
+    getNodeErrorCount,
+    getEdgeErrorCount,
+    hasNodeErrors,
+    hasEdgeErrors,
+    getFieldErrors,
+    hasFieldError,
+    getFieldErrorMessage,
+    getFirstErrorField,
+    setErrors,
+    clearErrors,
+    setShowErrors,
+  };
+}

package/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/src/hooks/use-nango-connect.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import Nango, { type OnConnectEvent } from '@nangohq/frontend';
+import { useCallback } from 'react';
+
+type OpenNangoConnectOptions = {
+  sessionToken: string;
+  onEvent?: OnConnectEvent;
+  connectOptions?: {
+    baseURL?: string;
+    apiURL?: string;
+  };
+};
+
+type NangoConnectInstance = {
+  setSessionToken: (token: string) => void;
+};
+
+export function useNangoConnect() {
+  const openNangoConnect = useCallback(
+    ({ sessionToken, onEvent, connectOptions }: OpenNangoConnectOptions): NangoConnectInstance => {
+      const nango = new Nango({
+        host: process.env.NEXT_PUBLIC_NANGO_HOST || undefined,
+      });
+
+      const connect = nango.openConnectUI({
+        baseURL:
+          connectOptions?.baseURL || process.env.NEXT_PUBLIC_NANGO_CONNECT_BASE_URL || undefined,
+        apiURL: connectOptions?.apiURL || process.env.NEXT_PUBLIC_NANGO_HOST || undefined,
+        onEvent,
+        detectClosedAuthWindow: true,
+      });
+
+      connect.setSessionToken(sessionToken);
+
+      return connect as NangoConnectInstance;
+    },
+    []
+  );
+
+  return openNangoConnect;
+}

package/src/hooks/use-nango-providers.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import type { ApiProvider } from '@nangohq/types';
+import { useEffect, useState } from 'react';
+import { fetchNangoProviders } from '@/lib/mcp-tools/nango';
+
+export function useNangoProviders() {
+  const [providers, setProviders] = useState<ApiProvider[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadProviders() {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const data = await fetchNangoProviders();
+        setProviders(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load providers');
+        setProviders([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadProviders();
+  }, []);
+
+  return { providers, loading, error };
+}

package/src/hooks/use-node-editor.ts

@@ -0,0 +1,141 @@
+import { useReactFlow } from '@xyflow/react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+import type { ErrorHelpers } from './use-graph-errors';
+
+interface UseNodeEditorOptions {
+  selectedNodeId: string;
+  errorHelpers?: ErrorHelpers;
+}
+
+export function useNodeEditor({ selectedNodeId, errorHelpers }: UseNodeEditorOptions) {
+  const { updateNodeData } = useReactFlow();
+  const markUnsaved = useGraphStore((state) => state.markUnsaved);
+
+  // Focus management for error fields
+  const fieldRefs = useRef<Record<string, HTMLElement>>({});
+
+  const setFieldRef = useCallback((fieldName: string, element: HTMLElement | null) => {
+    if (element) {
+      fieldRefs.current[fieldName] = element;
+    } else {
+      delete fieldRefs.current[fieldName];
+    }
+  }, []);
+
+  // Focus on first error field when component mounts or errors change
+  useEffect(() => {
+    if (errorHelpers) {
+      const firstErrorField = errorHelpers.getFirstErrorField();
+      if (firstErrorField && fieldRefs.current[firstErrorField]) {
+        // Small delay to ensure the element is rendered
+        setTimeout(() => {
+          fieldRefs.current[firstErrorField].focus();
+        }, 100);
+      }
+    }
+  }, [errorHelpers]);
+
+  // Helper function to get field error message
+  const getFieldError = useCallback(
+    (fieldName: string) => {
+      return errorHelpers?.getFieldErrorMessage(fieldName);
+    },
+    [errorHelpers]
+  );
+
+  // Simple field update
+  const updateField = useCallback(
+    (name: string, value: any) => {
+      updateNodeData(selectedNodeId, { [name]: value });
+      markUnsaved();
+    },
+    [selectedNodeId, updateNodeData, markUnsaved]
+  );
+
+  // Handle input change events
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const { name, value } = e.target;
+      updateField(name, value);
+    },
+    [updateField]
+  );
+
+  // Advanced path-based updates for nested objects
+  const updatePath = useCallback(
+    (path: string, value: any) => {
+      const pathParts = path.split('.');
+
+      if (pathParts.length === 1) {
+        updateField(path, value);
+      } else {
+        // For nested updates, we need to get the current node data
+        // This requires access to the current node data, which we'll need to pass in
+        // For now, let's use the simple updateField approach and handle complex cases separately
+        updateField(path, value);
+      }
+    },
+    [updateField]
+  );
+
+  // Enhanced updatePath that can handle nested objects
+  const updateNestedPath = useCallback(
+    (path: string, value: any, currentNodeData: any) => {
+      const pathParts = path.split('.');
+
+      if (pathParts.length === 1) {
+        updateField(path, value);
+      } else {
+        const [parentField, ...nestedPath] = pathParts;
+        // Ensure we have a valid parent object, even if it's empty
+        const currentParentValue = currentNodeData?.[parentField] || {};
+
+        const updatedParent = { ...currentParentValue } as any;
+        let current = updatedParent;
+
+        // Navigate to the correct nested location
+        for (let i = 0; i < nestedPath.length - 1; i++) {
+          const key = nestedPath[i];
+          if (!(key in current) || current[key] === null || current[key] === undefined) {
+            current[key] = {};
+          }
+          current = current[key];
+        }
+
+        // Set the final value
+        const finalKey = nestedPath[nestedPath.length - 1];
+        if (value === undefined || value === null || value === '') {
+          delete current[finalKey];
+          // If the parent object becomes empty, clean it up
+          if (Object.keys(updatedParent).length === 0 || Object.keys(current).length === 0) {
+            updateField(parentField, null);
+            return;
+          }
+        } else {
+          current[finalKey] = value;
+        }
+
+        updateField(parentField, updatedParent);
+      }
+    },
+    [updateField]
+  );
+
+  return {
+    // Field management
+    updateField,
+    updatePath,
+    updateNestedPath,
+    handleInputChange,
+
+    // Error handling
+    getFieldError,
+
+    // Focus management
+    setFieldRef,
+
+    // Utility
+    markUnsaved,
+  };
+}

package/src/hooks/use-project-data.ts

@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import type { Project } from '@/lib/types/project';
+import { fetchProjectAction } from '@/lib/actions/projects';
+
+export function useProjectData() {
+  const params = useParams();
+  const { tenantId, projectId } = params;
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchProject() {
+      if (!tenantId || !projectId) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Use server action to fetch project data
+        const result = await fetchProjectAction(tenantId as string, projectId as string);
+
+        if (!result.success) {
+          throw new Error(result.error || 'Failed to fetch project');
+        }
+
+        setProject(result.data || null);
+      } catch (err) {
+        console.error('Error fetching project:', err);
+        setError(err instanceof Error ? err.message : 'Unknown error');
+        setProject(null);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchProject();
+  }, [tenantId, projectId]);
+
+  return { project, loading, error };
+}

package/src/hooks/use-side-pane.ts

@@ -0,0 +1,20 @@
+import { parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs';
+
+const paneType = ['graph', 'node', 'edge'] as const;
+
+export function useSidePane() {
+  const [queryState, setQueryState] = useQueryStates({
+    pane: parseAsStringLiteral(paneType),
+    nodeId: parseAsString,
+    edgeId: parseAsString,
+  });
+
+  return {
+    pane: queryState.pane,
+    nodeId: queryState.nodeId,
+    edgeId: queryState.edgeId,
+    isOpen: Boolean(queryState.pane),
+    setQueryState,
+    openGraphPane: () => setQueryState({ pane: 'graph', nodeId: null, edgeId: null }),
+  };
+}