* refactor: move booking-audit client components from packages/features to apps/web/modules This is part of the larger effort to move tRPC-dependent UI components from packages/features to apps/web/modules to eliminate circular dependencies. Changes: - Move BookingHistory.tsx and BookingHistoryPage.tsx to apps/web/modules/booking-audit/components/ - Update imports in apps/web to use the new location Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: move formbricks client from packages/features to apps/web/modules Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: move hooks and stores from packages/features to apps/web/modules - Move useAppsData hook from packages/features/apps/hooks to apps/web/modules/apps/hooks - Move onboardingStore from packages/features/ee/organizations/lib to apps/web/modules/ee/organizations/lib - Move useWelcomeModal hook from packages/features/ee/organizations/hooks to apps/web/modules/ee/organizations/hooks - Move useAgentsData hook from packages/features/ee/workflows/hooks to apps/web/modules/ee/workflows/hooks - Update all import paths in consuming files Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: move onboardingStore test file to apps/web/modules Co-Authored-By: benny@cal.com <sldisek783@gmail.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { useMemo } from "react";
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import { useWatch } from "react-hook-form";
|
|
|
|
import type { FormValues } from "@calcom/features/ee/workflows/lib/types";
|
|
import type { RouterOutputs } from "@calcom/trpc/react";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
|
|
type AgentData = RouterOutputs["viewer"]["aiVoiceAgent"]["get"];
|
|
|
|
interface AgentQuery {
|
|
data: AgentData | undefined;
|
|
isPending: boolean;
|
|
isLoading: boolean;
|
|
error: Error | null;
|
|
}
|
|
|
|
interface UseAgentsDataReturn {
|
|
outboundAgentQueries: AgentQuery[];
|
|
inboundAgentQueries: AgentQuery[];
|
|
}
|
|
|
|
const emptyQuery: AgentQuery = { data: undefined, isPending: false, isLoading: false, error: null };
|
|
|
|
/**
|
|
* Custom hook to fetch and manage agent data for workflow steps.
|
|
*
|
|
* @param form - React Hook Form instance for workflow form values
|
|
* @returns Object containing outbound and inbound agent queries with proper typing
|
|
*/
|
|
export function useAgentsData(form: UseFormReturn<FormValues>): UseAgentsDataReturn {
|
|
const watchedSteps = useWatch({
|
|
control: form.control,
|
|
name: "steps",
|
|
});
|
|
|
|
const allAgentIds = useMemo(() => {
|
|
const outboundAgentIds = (watchedSteps || []).map((step) => step?.agentId || null);
|
|
const inboundAgentIds = (watchedSteps || []).map((step) => step?.inboundAgentId || null);
|
|
return { outboundAgentIds, inboundAgentIds };
|
|
}, [watchedSteps]);
|
|
|
|
const uniqueAgentIds = useMemo((): string[] => {
|
|
const allIds = [...allAgentIds.outboundAgentIds, ...allAgentIds.inboundAgentIds];
|
|
const validIds: string[] = [];
|
|
|
|
for (const id of allIds) {
|
|
if (id && typeof id === "string") {
|
|
validIds.push(id);
|
|
}
|
|
}
|
|
|
|
return Array.from(new Set(validIds));
|
|
}, [allAgentIds]);
|
|
|
|
const uniqueAgentQueries = trpc.useQueries((t) =>
|
|
uniqueAgentIds.map((agentId) => {
|
|
return t.viewer.aiVoiceAgent.get(
|
|
{ id: agentId },
|
|
{
|
|
enabled: true,
|
|
staleTime: 5 * 60 * 1000,
|
|
}
|
|
);
|
|
})
|
|
);
|
|
|
|
const agentDataMap = useMemo(() => {
|
|
const map = new Map<string, AgentQuery>();
|
|
uniqueAgentIds.forEach((agentId, index) => {
|
|
const query = uniqueAgentQueries[index];
|
|
if (query) {
|
|
map.set(agentId, {
|
|
data: query.data,
|
|
isPending: query.isPending,
|
|
isLoading: query.isLoading,
|
|
error: query.error,
|
|
});
|
|
}
|
|
});
|
|
return map;
|
|
}, [uniqueAgentIds, uniqueAgentQueries]);
|
|
|
|
const outboundAgentQueries = useMemo((): AgentQuery[] => {
|
|
return allAgentIds.outboundAgentIds.map((agentId) => {
|
|
if (!agentId) {
|
|
return emptyQuery;
|
|
}
|
|
return agentDataMap.get(agentId) || emptyQuery;
|
|
});
|
|
}, [allAgentIds.outboundAgentIds, agentDataMap]);
|
|
|
|
const inboundAgentQueries = useMemo((): AgentQuery[] => {
|
|
return allAgentIds.inboundAgentIds.map((agentId) => {
|
|
if (!agentId) {
|
|
return emptyQuery;
|
|
}
|
|
return agentDataMap.get(agentId) || emptyQuery;
|
|
});
|
|
}, [allAgentIds.inboundAgentIds, agentDataMap]);
|
|
|
|
return {
|
|
outboundAgentQueries,
|
|
inboundAgentQueries,
|
|
};
|
|
}
|