@docyrus/ui-pro-ai-assistant 0.0.1

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useAssistantApi } from './use-assistant-api';
+export { useDeploymentData } from './use-deployment-data';
+export { type ProjectState, useProjectState } from './use-project-state';
+export { type SessionState, useSessionState } from './use-session-state';
+export { useSpeechRecognition } from './use-speech-recognition';
+export { createInitialUIState, type UIState, useUIState } from './use-ui-state';
+export { useWorksState, type WorksState } from './use-works-state';

package/src/hooks/use-assistant-api.ts

@@ -0,0 +1,507 @@
+'use client';
+
+import {
+  useCallback, useEffect, useRef, useState
+} from 'react';
+
+import { toast } from 'sonner';
+
+import {
+  type ApiResponse,
+  type AssistantSession,
+  type Project,
+  type Work
+} from '../types';
+
+import { useApiClient } from '../lib/api-client';
+import { useAssistantConfig } from '../lib/assistant-config';
+
+interface UseAssistantApiProps {
+  tenantAiAgentId: string;
+  deploymentId?: string;
+  logo?: string;
+  title?: string;
+  t: (key: string) => string;
+}
+
+interface UseAssistantApiReturn {
+  // State
+  agentDetails: { logo?: string; name?: string; welcomeMessage?: string } | null;
+  isLoadingAgentDetails: boolean;
+
+  // Thread operations
+  fetchThreads: () => Promise<AssistantSession[]>;
+  fetchProjectThreads: (projectId: string) => Promise<AssistantSession[]>;
+  loadThreadMessages: (threadId: string) => Promise<any[]>;
+  createThread: (params: {
+    subject: string;
+    bodyText: string;
+    senderName: string;
+    projectId?: string | null;
+  }) => Promise<any>;
+
+  // Project operations
+  fetchProjects: () => Promise<Project[]>;
+  createProject: (params: {
+    name: string;
+    description?: string;
+    instructions?: string;
+    userId?: string;
+  }) => Promise<Project | null>;
+  updateProject: (projectId: string, params: {
+    name?: string;
+    description?: string;
+    instructions?: string;
+  }) => Promise<boolean>;
+  deleteProject: (projectId: string) => Promise<boolean>;
+
+  // Work operations
+  fetchWorks: () => Promise<Work[]>;
+  fetchProjectWorks: (projectId: string) => Promise<Work[]>;
+
+  // Session operations
+  updateSession: (sessionId: string, subject: string) => Promise<boolean>;
+  deleteSession: (sessionId: string) => Promise<boolean>;
+}
+
+export function useAssistantApi({
+  tenantAiAgentId,
+  deploymentId,
+  logo,
+  title,
+  t
+}: UseAssistantApiProps): UseAssistantApiReturn {
+  const apiClient = useApiClient();
+  const { user: configUser } = useAssistantConfig();
+  const [agentDetails, setAgentDetails] = useState<{ logo?: string; name?: string; welcomeMessage?: string } | null>(null);
+  const [isLoadingAgentDetails, setIsLoadingAgentDetails] = useState(!!tenantAiAgentId);
+  const apiClientRef = useRef(apiClient);
+  const fetchedAgentIdRef = useRef<string | null>(null);
+
+  apiClientRef.current = apiClient;
+
+  // Fetch agent details whenever tenantAiAgentId or deploymentId changes
+  useEffect(() => {
+    const effectiveId = deploymentId || tenantAiAgentId;
+    const endpoint = deploymentId ? `/ai/agent-deployments/${deploymentId}` : `/ai/agent-deployments/base/${tenantAiAgentId}`;
+
+    if (!effectiveId || fetchedAgentIdRef.current === effectiveId) return;
+
+    let cancelled = false;
+
+    const fetchAgentDetails = async () => {
+      setAgentDetails(null);
+      setIsLoadingAgentDetails(true);
+
+      try {
+        const response: any = await apiClientRef.current.get(endpoint);
+
+        if (cancelled) return;
+
+        fetchedAgentIdRef.current = effectiveId;
+
+        if (response.success && response.data) {
+          const { data } = response;
+          const avatar = data.avatar?.signed_url || data.agent?.avatar?.signed_url;
+          const name = data.name || data.agent?.agentName || data.agent?.name;
+          const welcomeMessage = data.welcomeMessage || data.agent?.welcomeMessage;
+
+          setAgentDetails({ logo: avatar, name, welcomeMessage });
+        } else {
+          setAgentDetails({ logo, name: title });
+        }
+      } catch (err) {
+        console.error('[useAssistantApi] fetch error:', err);
+        if (cancelled) return;
+        fetchedAgentIdRef.current = effectiveId;
+        setAgentDetails({ logo, name: title });
+      } finally {
+        if (!cancelled) setIsLoadingAgentDetails(false);
+      }
+    };
+
+    fetchAgentDetails();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    tenantAiAgentId,
+    deploymentId,
+    logo,
+    title
+  ]);
+
+  // Thread operations
+  const fetchThreads = useCallback(async (): Promise<AssistantSession[]> => {
+    try {
+      const apiParams: any = {
+        columns: 'id,subject,created_on,last_modified_on,body_text,tenant_ai_agent_id',
+        orderBy: JSON.stringify({ field: 'created_on', direction: 'desc' })
+      };
+
+      apiParams.filters = JSON.stringify({
+        rules: [
+          {
+            field: 'tenant_ai_agent_id',
+            operator: '=',
+            value: tenantAiAgentId
+          }
+        ]
+      });
+
+      const response = (await apiClient.get('/apps/base/data-sources/thread/items', apiParams)) as ApiResponse<
+        Array<any>
+      >;
+
+      if (response.success && response.data) {
+        const items = Array.isArray(response.data) ? response.data : (response.data as any).items || [];
+
+        return items.map((item: any) => ({
+          id: item.id,
+          title: item.subject,
+          messages: [],
+          createdAt: new Date(item.created_on),
+          updatedAt: new Date(item.last_modified_on || item.created_on)
+        }));
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to fetch threads:', error);
+
+      return [];
+    }
+  }, [apiClient, tenantAiAgentId]);
+
+  const fetchProjectThreads = useCallback(async (projectId: string): Promise<AssistantSession[]> => {
+    try {
+      const apiParams: any = {
+        columns: 'id,subject,created_on,last_modified_on,body_text,tenant_ai_agent_id,tenant_ai_project_id ',
+        orderBy: JSON.stringify({ field: 'created_on', direction: 'desc' })
+      };
+
+      apiParams.filters = JSON.stringify({
+        rules: [
+          {
+            field: 'tenant_ai_project_id ',
+            operator: '=',
+            value: projectId
+          }
+        ]
+      });
+
+      const response = (await apiClient.get('/apps/base/data-sources/thread/items', apiParams)) as ApiResponse<
+        Array<any>
+      >;
+
+      if (response.success && response.data) {
+        const items = Array.isArray(response.data) ? response.data : (response.data as any).items || [];
+
+        return items.map((item: any) => ({
+          id: item.id,
+          title: item.subject,
+          messages: [],
+          createdAt: new Date(item.created_on),
+          updatedAt: new Date(item.last_modified_on)
+        }));
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to fetch project threads:', error);
+
+      return [];
+    }
+  }, [apiClient]);
+
+  const loadThreadMessages = useCallback(async (threadId: string): Promise<any[]> => {
+    try {
+      const response = (await apiClient.get('/apps/base/data-sources/message/items', {
+        columns: 'body_json,created_on,record_owner,role',
+        filters: JSON.stringify({
+          rules: [
+            {
+              field: 'thread',
+              operator: '=',
+              value: threadId
+            }
+          ]
+        }),
+        sort: JSON.stringify([{ field: 'created_on', direction: 'asc' }])
+      })) as ApiResponse<Array<any>>;
+
+      if (response.success && response.data) {
+        return response.data;
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Error loading thread messages:', error);
+
+      return [];
+    }
+  }, [apiClient]);
+
+  const createThread = useCallback(async (params: {
+    subject: string;
+    bodyText: string;
+    senderName: string;
+    projectId?: string | null;
+  }): Promise<any> => {
+    const response = (await apiClient.post('/apps/base/data-sources/thread/items', {
+      subject: params.subject,
+      body_text: params.bodyText,
+      sender_name: params.senderName,
+      thread_type: 'assistant',
+      tenant_ai_agent_deployment_id: deploymentId ? String(deploymentId) : null,
+      tenant_ai_agent_id: String(tenantAiAgentId),
+      tenant_ai_project_id: params.projectId || null
+    })) as ApiResponse<any>;
+
+    if (response && response.success && response.data) {
+      return response.data;
+    }
+
+    throw new Error('Failed to create thread');
+  }, [apiClient, deploymentId, tenantAiAgentId]);
+
+  // Project operations
+  const fetchProjects = useCallback(async (): Promise<Project[]> => {
+    try {
+      const userId = configUser?.id || null;
+      const response = (await apiClient.get('/ai/projects')) as ApiResponse<Array<any>>;
+
+      if (response.success && response.data) {
+        const responseItems = Array.isArray(response.data) ? response.data : (response.data as any).items || [];
+        const allProjects: Array<Project> = responseItems.map((item: any) => ({
+          id: item.id,
+          tenant_ai_agent_id: item.tenant_ai_agent_id,
+          tenant_ai_agent_deployment_id: item.tenant_ai_agent_deployment_id,
+          name: item.name,
+          description: item.description,
+          created_by: item.created_by,
+          shared_to: item.shared_to
+        }));
+
+        // Filter projects by user if userId is available
+        return userId ? allProjects.filter(
+          project => project.created_by === userId || (project.shared_to && project.shared_to.includes(userId))
+        ) : allProjects;
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to fetch projects:', error);
+
+      return [];
+    }
+  }, [apiClient, configUser?.id]);
+
+  const createProject = useCallback(async (params: {
+    name: string;
+    description?: string;
+    instructions?: string;
+    userId?: string;
+  }): Promise<Project | null> => {
+    try {
+      const response = (await apiClient.post('/ai/projects', {
+        name: params.name,
+        description: params.description,
+        instructions: params.instructions,
+        tenant_ai_agent_id: tenantAiAgentId,
+        tenant_ai_agent_deployment_id: deploymentId,
+        created_by: params.userId
+      })) as ApiResponse<any>;
+
+      if (response.success && response.data) {
+        toast.success(t('toast.project_created_success'));
+
+        return response.data as Project;
+      }
+
+      throw new Error('Failed to create project');
+    } catch (error) {
+      console.error('Error creating project:', error);
+      toast.error(t('toast.failed_create_project'));
+
+      return null;
+    }
+  }, [
+    apiClient,
+    tenantAiAgentId,
+    deploymentId,
+    t
+  ]);
+
+  const updateProject = useCallback(async (projectId: string, params: {
+    name?: string;
+    description?: string;
+    instructions?: string;
+  }): Promise<boolean> => {
+    try {
+      const response: ApiResponse = await apiClient.patch(`/ai/projects/${projectId}`, params);
+
+      if (response.success) {
+        toast.success(t('toast.project_updated_success'));
+
+        return true;
+      }
+
+      throw new Error('Failed to update project');
+    } catch (error) {
+      console.error('Error updating project:', error);
+      toast.error(t('toast.failed_update_project'));
+
+      return false;
+    }
+  }, [apiClient, t]);
+
+  const deleteProject = useCallback(async (projectId: string): Promise<boolean> => {
+    try {
+      const response: ApiResponse = await apiClient.delete(`/ai/projects/${projectId}`);
+
+      if (response.success) {
+        toast.success(t('toast.project_deleted_success'));
+
+        return true;
+      }
+
+      throw new Error('Failed to delete project');
+    } catch (error) {
+      console.error('Error deleting project:', error);
+      toast.error(t('toast.failed_delete_project'));
+
+      return false;
+    }
+  }, [apiClient, t]);
+
+  // Work operations
+  const fetchWorks = useCallback(async (): Promise<Work[]> => {
+    try {
+      const response = (await apiClient.get('/ai/works')) as ApiResponse<Array<any>>;
+
+      if (response.success && response.data) {
+        const worksItems = Array.isArray(response.data) ? response.data : (response.data as any).items || [];
+
+        return worksItems.map((item: any) => ({
+          id: item.id,
+          title: item.title,
+          base_thread_id: item.base_thread_id,
+          content_json: item.content_json,
+          content_text: item.content_text,
+          description: item.description,
+          tenant_ai_agent_deployment_id: item.tenant_ai_agent_deployment_id,
+          tenant_ai_agent_id: item.tenant_ai_agent_id,
+          tenant_data_source_id: item.tenant_data_source_id,
+          tenant_ai_project_id: item.tenant_ai_project_id,
+          type: item.type,
+          created_by: item.created_by,
+          created_on: item.created_on,
+          last_modified_on: item.last_modified_on,
+          image_url: item.image_url || undefined
+        }));
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to fetch works:', error);
+
+      return [];
+    }
+  }, [apiClient]);
+
+  const fetchProjectWorks = useCallback(async (projectId: string): Promise<Work[]> => {
+    try {
+      const response = (await apiClient.get('/ai/works')) as ApiResponse<Array<any>>;
+
+      if (response.success && response.data) {
+        const allWorks = Array.isArray(response.data) ? response.data : (response.data as any).items || [];
+
+        return allWorks
+          .filter((work: any) => work.tenant_ai_project_id === projectId)
+          .map((item: any) => ({
+            id: item.id,
+            title: item.title,
+            base_thread_id: item.base_thread_id,
+            content_json: item.content_json,
+            content_text: item.content_text,
+            description: item.description,
+            tenant_ai_agent_deployment_id: item.tenant_ai_agent_deployment_id,
+            tenant_ai_agent_id: item.tenant_ai_agent_id,
+            tenant_data_source_id: item.tenant_data_source_id,
+            tenant_ai_project_id: item.tenant_ai_project_id,
+            type: item.type,
+            created_by: item.created_by,
+            created_on: item.created_on,
+            last_modified_on: item.last_modified_on,
+            image_url: item.image_url || undefined
+          }));
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Failed to fetch project works:', error);
+
+      return [];
+    }
+  }, [apiClient]);
+
+  // Session operations
+  const updateSession = useCallback(async (sessionId: string, subject: string): Promise<boolean> => {
+    try {
+      const response: ApiResponse = await apiClient.patch(`/apps/base/data-sources/thread/items/${sessionId}`, {
+        subject
+      });
+
+      if (response.success) {
+        toast.success(t('toast.session_renamed_success'));
+
+        return true;
+      }
+
+      throw new Error('Failed to update session');
+    } catch (error) {
+      console.error('Error updating session:', error);
+      toast.error(t('toast.failed_rename_session'));
+
+      return false;
+    }
+  }, [apiClient, t]);
+
+  const deleteSession = useCallback(async (sessionId: string): Promise<boolean> => {
+    try {
+      const response: ApiResponse = await apiClient.delete(`/apps/base/data-sources/thread/items/${sessionId}`);
+
+      if (response.success) {
+        toast.success(t('toast.session_deleted_success'));
+
+        return true;
+      }
+
+      throw new Error('Failed to delete session');
+    } catch (error) {
+      console.error('Error deleting session:', error);
+      toast.error(t('toast.failed_delete_session'));
+
+      return false;
+    }
+  }, [apiClient, t]);
+
+  return {
+    agentDetails,
+    isLoadingAgentDetails,
+    fetchThreads,
+    fetchProjectThreads,
+    loadThreadMessages,
+    createThread,
+    fetchProjects,
+    createProject,
+    updateProject,
+    deleteProject,
+    fetchWorks,
+    fetchProjectWorks,
+    updateSession,
+    deleteSession
+  };
+}

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

@@ -0,0 +1,162 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { type Agent, type McpServer, type Model } from '../types';
+
+import { useApiClient } from '../lib/api-client';
+
+export type { Agent, McpServer, Model };
+
+export interface AgentCapabilities {
+  supportWebSearch: boolean;
+  supportDocumentSearch: boolean;
+  supportDeepResearch: boolean;
+  supportThinking: boolean;
+  supportWorkCanvas: boolean;
+  supportFiles: boolean;
+}
+
+export interface UseDeploymentDataResult {
+  models: Model[];
+  agents: Agent[];
+  selectedModel: Model | null;
+  setSelectedModel: (model: Model | null) => void;
+  showMultiModels: boolean;
+  selectedAgent: Agent | null;
+  setSelectedAgent: (agent: Agent | null) => void;
+  showAgents: boolean;
+  agentAvatar?: string;
+  mcpServers: McpServer[];
+  activeMcpServers: Record<string, boolean>;
+  toggleMcpServer: (id: string, active: boolean) => void;
+  capabilities: AgentCapabilities | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook to fetch deployment data (models and agents)
+ */
+export function useDeploymentData(
+  deploymentIdOrAgentId?: string,
+  supportMultiModels = false,
+  isBaseAgent = false
+): UseDeploymentDataResult {
+  const apiClient = useApiClient();
+  const [models, setModels] = useState<Model[]>([]);
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [mcpServers, setMcpServers] = useState<McpServer[]>([]);
+  const [activeMcpServers, setActiveMcpServers] = useState<Record<string, boolean>>({});
+  const [selectedModel, setSelectedModel] = useState<Model | null>(null);
+  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
+  const [capabilities, setCapabilities] = useState<AgentCapabilities | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!deploymentIdOrAgentId) return;
+
+    const fetchData = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        // Use different endpoint based on whether it's a base agent or deployment
+        const endpoint = isBaseAgent ? `/ai/agent-deployments/base/${deploymentIdOrAgentId}` : `/ai/agent-deployments/${deploymentIdOrAgentId}`;
+
+        const response = await apiClient.get(endpoint);
+
+        if (response.success && response.data) {
+          const agentData = response.data as {
+            agent?: {
+              models?: Model[];
+              agents?: Array<Agent & { isSkill?: boolean }>;
+              mcpServers?: McpServer[];
+              defaultAiModelId?: string;
+              supportWebSearch?: boolean;
+              documentSearch?: boolean;
+              supportDeepResearch?: boolean;
+              supportThinking?: boolean;
+              featureWorks?: boolean;
+              supportFiles?: boolean;
+            };
+            defaultAiModelId?: string;
+          };
+
+          // Extract models from agent.models
+          if (agentData.agent?.models) {
+            const fetchedModels = agentData.agent.models;
+
+            setModels(fetchedModels);
+
+            // Set default model based on defaultAiModelId
+            const defaultModelId = agentData.defaultAiModelId || agentData.agent.defaultAiModelId;
+
+            if (fetchedModels.length > 0) {
+              const defaultModel = defaultModelId ? fetchedModels.find((m: Model) => m.id === defaultModelId) : fetchedModels[0];
+
+              setSelectedModel(prev => prev ?? (defaultModel || fetchedModels[0]));
+            }
+          } else {
+            console.warn('[useDeploymentData] No models found in agent data');
+          }
+
+          // Extract sub-agents (skills)
+          if (agentData.agent?.agents) {
+            const fetchedAgents = agentData.agent.agents.filter(a => a.isSkill);
+
+            setAgents(fetchedAgents);
+            if (fetchedAgents.length > 0) {
+              setSelectedAgent(prev => prev ?? fetchedAgents[0]);
+            }
+          }
+
+          // Extract MCP servers
+          if (agentData.agent?.mcpServers) {
+            setMcpServers(agentData.agent.mcpServers);
+          }
+
+          // Extract agent capabilities
+          if (agentData.agent) {
+            setCapabilities({
+              supportWebSearch: agentData.agent.supportWebSearch ?? false,
+              supportDocumentSearch: agentData.agent.documentSearch ?? false,
+              supportDeepResearch: agentData.agent.supportDeepResearch ?? false,
+              supportThinking: agentData.agent.supportThinking ?? false,
+              supportWorkCanvas: agentData.agent.featureWorks ?? false,
+              supportFiles: agentData.agent.supportFiles ?? false
+            });
+          }
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Failed to fetch deployment data'));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [deploymentIdOrAgentId, isBaseAgent, apiClient]);
+
+  const toggleMcpServer = (id: string, active: boolean) => {
+    setActiveMcpServers(prev => ({ ...prev, [id]: active }));
+  };
+
+  return {
+    models,
+    agents,
+    selectedModel,
+    setSelectedModel,
+    showMultiModels: supportMultiModels && models.length > 1,
+    selectedAgent,
+    setSelectedAgent,
+    showAgents: agents.length > 1,
+    agentAvatar: selectedAgent?.avatar,
+    mcpServers,
+    activeMcpServers,
+    toggleMcpServer,
+    capabilities,
+    isLoading,
+    error
+  };
+}