fastapi-fullstack 0.1.7__py3-none-any.whl → 0.1.15__py3-none-any.whl

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/hooks/use-chat.ts

@@ -1,10 +1,10 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { nanoid } from "nanoid";
 import { useWebSocket } from "./use-websocket";
 import { useChatStore } from "@/stores";
-import type { ChatMessage, ToolCall, WSEvent } from "@/types";
+import type { ChatMessage, ToolCall, WSEvent, PendingApproval, Decision } from "@/types";
 import { WS_URL } from "@/lib/constants";
 {%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
 import { useConversationStore } from "@/stores";
@@ -33,11 +33,39 @@ export function useChat() {
 
   const [isProcessing, setIsProcessing] = useState(false);
   const [currentMessageId, setCurrentMessageId] = useState<string | null>(null);
+  // Use ref for groupId to avoid React state timing issues with rapid WebSocket events
+  const currentGroupIdRef = useRef<string | null>(null);
+  // Human-in-the-Loop: pending tool approval state
+  const [pendingApproval, setPendingApproval] = useState<PendingApproval | null>(null);
 
   const handleWebSocketMessage = useCallback(
     (event: MessageEvent) => {
       const wsEvent: WSEvent = JSON.parse(event.data);
 
+      // Helper to create a new message
+      const createNewMessage = (content: string): string => {
+        // Mark previous message as not streaming before creating new one
+        if (currentMessageId) {
+          updateMessage(currentMessageId, (msg) => ({
+            ...msg,
+            isStreaming: false,
+          }));
+        }
+
+        const newMsgId = nanoid();
+        addMessage({
+          id: newMsgId,
+          role: "assistant",
+          content,
+          timestamp: new Date(),
+          isStreaming: true,
+          toolCalls: [],
+          groupId: currentGroupIdRef.current || undefined,
+        });
+        setCurrentMessageId(newMsgId);
+        return newMsgId;
+      };
+
       switch (wsEvent.type) {
 {%- if cookiecutter.enable_conversation_persistence and cookiecutter.use_database %}
         case "conversation_created": {
@@ -56,17 +84,15 @@ export function useChat() {
 {%- endif %}
 
         case "model_request_start": {
-          // Create new assistant message placeholder
-          const newMsgId = nanoid();
-          setCurrentMessageId(newMsgId);
-          addMessage({
-            id: newMsgId,
-            role: "assistant",
-            content: "",
-            timestamp: new Date(),
-            isStreaming: true,
-            toolCalls: [],
-          });
+          // PydanticAI/LangChain - create message immediately
+          createNewMessage("");
+          break;
+        }
+
+        case "crew_start":
+        case "crew_started": {
+          // CrewAI - generate groupId for this execution, wait for agent events
+          currentGroupIdRef.current = nanoid();
           break;
         }
 
@@ -82,6 +108,118 @@ export function useChat() {
           break;
         }
 
+        // CrewAI agent events - each agent gets its own message container
+        case "agent_started": {
+          const { agent } = wsEvent.data as {
+            agent: string;
+            task: string;
+          };
+          // Create NEW message for this agent (groupId read from ref)
+          createNewMessage(`🤖 **${agent}** is starting...`);
+          break;
+        }
+
+        case "agent_completed": {
+          // Finalize current agent's message with output
+          if (currentMessageId) {
+            const { agent, output } = wsEvent.data as {
+              agent: string;
+              output: string;
+            };
+            updateMessage(currentMessageId, (msg) => ({
+              ...msg,
+              content: `✅ **${agent}**\n\n${output}`,
+              isStreaming: false,
+            }));
+          }
+          break;
+        }
+
+        // CrewAI task events - create separate message for each task
+        case "task_started": {
+          const { description, agent } = wsEvent.data as {
+            task_id: string;
+            description: string;
+            agent: string;
+          };
+          // Create NEW message for this task (groupId read from ref)
+          createNewMessage(`📋 **Task** (${agent})\n\n${description}`);
+          break;
+        }
+
+        case "task_completed": {
+          // Finalize the task message
+          if (currentMessageId) {
+            const { output, agent } = wsEvent.data as {
+              task_id: string;
+              output: string;
+              agent: string;
+            };
+            updateMessage(currentMessageId, (msg) => ({
+              ...msg,
+              content: `✅ **Task completed** (${agent})\n\n${output}`,
+              isStreaming: false,
+            }));
+          }
+          break;
+        }
+
+        // CrewAI tool events
+        case "tool_started": {
+          if (currentMessageId) {
+            const { tool_name, tool_args, agent } = wsEvent.data as {
+              tool_name: string;
+              tool_args: string;
+              agent: string;
+            };
+            const toolCall: ToolCall = {
+              id: nanoid(),
+              name: tool_name,
+              args: { input: tool_args, agent },
+              status: "running",
+            };
+            addToolCall(currentMessageId, toolCall);
+          }
+          break;
+        }
+
+        case "tool_finished": {
+          // Tool finished - update last tool call status
+          if (currentMessageId) {
+            const { tool_name, tool_result } = wsEvent.data as {
+              tool_name: string;
+              tool_result: string;
+              agent: string;
+            };
+            // Find and update the matching tool call
+            updateMessage(currentMessageId, (msg) => {
+              const toolCalls = msg.toolCalls || [];
+              const lastToolCall = toolCalls.find(
+                (tc) => tc.name === tool_name && tc.status === "running"
+              );
+              if (lastToolCall) {
+                return {
+                  ...msg,
+                  toolCalls: toolCalls.map((tc) =>
+                    tc.id === lastToolCall.id
+                      ? { ...tc, result: tool_result, status: "completed" as const }
+                      : tc
+                  ),
+                };
+              }
+              return msg;
+            });
+          }
+          break;
+        }
+
+        // LLM events (can be used for showing thinking status)
+        case "llm_started":
+        case "llm_completed": {
+          // LLM lifecycle events - optionally show status
+          break;
+        }
+
         case "tool_call": {
           // Add tool call to current message
           if (currentMessageId) {
@@ -119,22 +257,33 @@ export function useChat() {
         case "final_result": {
           // Finalize message
           if (currentMessageId) {
-            updateMessage(currentMessageId, (msg) => ({
-              ...msg,
-              isStreaming: false,
-            }));
+            const { output } = wsEvent.data as { output: string };
+            if (output) {
+              updateMessage(currentMessageId, (msg) => ({
+                ...msg,
+                content: msg.content || output,
+                isStreaming: false,
+              }));
+            } else {
+              updateMessage(currentMessageId, (msg) => ({
+                ...msg,
+                isStreaming: false,
+              }));
+            }
           }
           setIsProcessing(false);
           setCurrentMessageId(null);
+          currentGroupIdRef.current = null;
           break;
         }
 
         case "error": {
           // Handle error
           if (currentMessageId) {
+            const { message } = wsEvent.data as { message: string };
             updateMessage(currentMessageId, (msg) => ({
               ...msg,
-              content: msg.content + "\n\n[Error occurred]",
+              content: msg.content + `\n\n❌ Error: ${message || "Unknown error"}`,
               isStreaming: false,
             }));
           }
@@ -142,6 +291,35 @@ export function useChat() {
           break;
         }
 
+        case "tool_approval_required": {
+          // Human-in-the-Loop: AI wants to execute tools that need approval
+          const { action_requests, review_configs } = wsEvent.data as {
+            action_requests: Array<{
+              id: string;
+              tool_name: string;
+              args: Record<string, unknown>;
+            }>;
+            review_configs: Array<{
+              tool_name: string;
+              allow_edit?: boolean;
+              timeout?: number;
+            }>;
+          };
+          setPendingApproval({
+            actionRequests: action_requests,
+            reviewConfigs: review_configs,
+          });
+          // Show pending tools in the current message
+          if (currentMessageId) {
+            const toolNames = action_requests.map((ar) => ar.tool_name).join(", ");
+            updateMessage(currentMessageId, (msg) => ({
+              ...msg,
+              content: msg.content + `\n\n⏸️ Waiting for approval: ${toolNames}`,
+            }));
+          }
+          break;
+        }
+
         case "complete": {
           setIsProcessing(false);
           break;
@@ -191,6 +369,49 @@ export function useChat() {
 {%- endif %}
   );
 
+  // Human-in-the-Loop: send resume message with user decisions
+  const sendResumeDecisions = useCallback(
+    (decisions: Decision[]) => {
+      // Clear pending approval state
+      setPendingApproval(null);
+
+      // Update message to show decisions were made
+      if (currentMessageId) {
+        const approvedCount = decisions.filter((d) => d.type === "approve").length;
+        const editedCount = decisions.filter((d) => d.type === "edit").length;
+        const rejectedCount = decisions.filter((d) => d.type === "reject").length;
+
+        const summaryParts: string[] = [];
+        if (approvedCount > 0) summaryParts.push(`${approvedCount} approved`);
+        if (editedCount > 0) summaryParts.push(`${editedCount} edited`);
+        if (rejectedCount > 0) summaryParts.push(`${rejectedCount} rejected`);
+
+        updateMessage(currentMessageId, (msg) => ({
+          ...msg,
+          content: msg.content.replace(
+            /\n\n⏸️ Waiting for approval:.*$/,
+            `\n\n✅ Decisions: ${summaryParts.join(", ")}`
+          ),
+        }));
+      }
+
+      // Send resume message to WebSocket
+      sendMessage({
+        type: "resume",
+        decisions: decisions.map((d) => {
+          if (d.type === "edit" && d.editedAction) {
+            return {
+              type: "edit",
+              edited_action: d.editedAction,
+            };
+          }
+          return { type: d.type };
+        }),
+      });
+    },
+    [currentMessageId, updateMessage, sendMessage]
+  );
+
   return {
     messages,
     isConnected,
@@ -199,5 +420,8 @@ export function useChat() {
     disconnect,
     sendMessage: sendChatMessage,
     clearMessages,
+    // Human-in-the-Loop support
+    pendingApproval,
+    sendResumeDecisions,
   };
 }

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/hooks/use-local-chat.ts

@@ -1,10 +1,10 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { nanoid } from "nanoid";
 import { useWebSocket } from "./use-websocket";
 import { useLocalChatStore } from "@/stores/local-chat-store";
-import type { ChatMessage, ToolCall, WSEvent } from "@/types";
+import type { ChatMessage, ToolCall, WSEvent, PendingApproval, Decision } from "@/types";
 import { WS_URL } from "@/lib/constants";
 
 export function useLocalChat() {
@@ -22,23 +22,50 @@ export function useLocalChat() {
   const messages = getCurrentMessages();
   const [isProcessing, setIsProcessing] = useState(false);
   const [currentMessageId, setCurrentMessageId] = useState<string | null>(null);
+  // Use ref for groupId to avoid React state timing issues with rapid WebSocket events
+  const currentGroupIdRef = useRef<string | null>(null);
+  // Human-in-the-Loop: pending tool approval state
+  const [pendingApproval, setPendingApproval] = useState<PendingApproval | null>(null);
 
   const handleWebSocketMessage = useCallback(
     (event: MessageEvent) => {
       const wsEvent: WSEvent = JSON.parse(event.data);
 
+      // Helper to create a new message for CrewAI events
+      const createNewMessage = (content: string): string => {
+        // Mark previous message as not streaming before creating new one
+        if (currentMessageId) {
+          updateMessage(currentMessageId, (msg) => ({
+            ...msg,
+            isStreaming: false,
+          }));
+        }
+
+        const newMsgId = nanoid();
+        addMessage({
+          id: newMsgId,
+          role: "assistant",
+          content,
+          timestamp: new Date(),
+          isStreaming: true,
+          toolCalls: [],
+          groupId: currentGroupIdRef.current || undefined,
+        });
+        setCurrentMessageId(newMsgId);
+        return newMsgId;
+      };
+
       switch (wsEvent.type) {
         case "model_request_start": {
-          const newMsgId = nanoid();
-          setCurrentMessageId(newMsgId);
-          addMessage({
-            id: newMsgId,
-            role: "assistant",
-            content: "",
-            timestamp: new Date(),
-            isStreaming: true,
-            toolCalls: [],
-          });
+          // PydanticAI/LangChain - create message immediately
+          createNewMessage("");
+          break;
+        }
+
+        case "crew_start":
+        case "crew_started": {
+          // CrewAI - generate groupId for this execution, wait for agent events
+          currentGroupIdRef.current = nanoid();
           break;
         }
 
@@ -54,6 +81,117 @@ export function useLocalChat() {
           break;
         }
 
+        // CrewAI agent events - each agent gets its own message container
+        case "agent_started": {
+          const { agent } = wsEvent.data as {
+            agent: string;
+            task: string;
+          };
+          // Create NEW message for this agent (groupId read from ref)
+          createNewMessage(`🤖 **${agent}** is starting...`);
+          break;
+        }
+
+        case "agent_completed": {
+          // Finalize current agent's message with output
+          if (currentMessageId) {
+            const { agent, output } = wsEvent.data as {
+              agent: string;
+              output: string;
+            };
+            updateMessage(currentMessageId, (msg) => ({
+              ...msg,
+              content: `✅ **${agent}**\n\n${output}`,
+              isStreaming: false,
+            }));
+          }
+          break;
+        }
+
+        // CrewAI task events - create separate message for each task
+        case "task_started": {
+          const { description, agent } = wsEvent.data as {
+            task_id: string;
+            description: string;
+            agent: string;
+          };
+          // Create NEW message for this task (groupId read from ref)
+          createNewMessage(`📋 **Task** (${agent})\n\n${description}`);
+          break;
+        }
+
+        case "task_completed": {
+          // Finalize the task message
+          if (currentMessageId) {
+            const { output, agent } = wsEvent.data as {
+              task_id: string;
+              output: string;
+              agent: string;
+            };
+            updateMessage(currentMessageId, (msg) => ({
+              ...msg,
+              content: `✅ **Task completed** (${agent})\n\n${output}`,
+              isStreaming: false,
+            }));
+          }
+          break;
+        }
+
+        // CrewAI tool events - add as tool calls to current message
+        case "tool_started": {
+          if (currentMessageId) {
+            const { tool_name, tool_args, agent } = wsEvent.data as {
+              tool_name: string;
+              tool_args: string;
+              agent: string;
+            };
+            const toolCall: ToolCall = {
+              id: nanoid(),
+              name: tool_name,
+              args: { input: tool_args, agent },
+              status: "running",
+            };
+            addToolCall(currentMessageId, toolCall);
+          }
+          break;
+        }
+
+        case "tool_finished": {
+          // Tool finished - update last tool call status
+          if (currentMessageId) {
+            const { tool_name, tool_result } = wsEvent.data as {
+              tool_name: string;
+              tool_result: string;
+              agent: string;
+            };
+            // Find and update the matching tool call
+            updateMessage(currentMessageId, (msg) => {
+              const toolCalls = msg.toolCalls || [];
+              const lastToolCall = toolCalls.find(
+                (tc) => tc.name === tool_name && tc.status === "running"
+              );
+              if (lastToolCall) {
+                return {
+                  ...msg,
+                  toolCalls: toolCalls.map((tc) =>
+                    tc.id === lastToolCall.id
+                      ? { ...tc, result: tool_result, status: "completed" as const }
+                      : tc
+                  ),
+                };
+              }
+              return msg;
+            });
+          }
+          break;
+        }
+
+        // LLM events - silently ignored
+        case "llm_started":
+        case "llm_completed": {
+          break;
+        }
+
         case "tool_call": {
           if (currentMessageId) {
             const { tool_name, args, tool_call_id } = wsEvent.data as {
@@ -88,21 +226,33 @@ export function useLocalChat() {
 
         case "final_result": {
           if (currentMessageId) {
-            updateMessage(currentMessageId, (msg) => ({
-              ...msg,
-              isStreaming: false,
-            }));
+            const { output } = wsEvent.data as { output: string };
+            // For CrewAI, replace content with final output if it exists
+            if (output) {
+              updateMessage(currentMessageId, (msg) => ({
+                ...msg,
+                content: msg.content || output,
+                isStreaming: false,
+              }));
+            } else {
+              updateMessage(currentMessageId, (msg) => ({
+                ...msg,
+                isStreaming: false,
+              }));
+            }
           }
           setIsProcessing(false);
           setCurrentMessageId(null);
+          currentGroupIdRef.current = null;
           break;
         }
 
         case "error": {
           if (currentMessageId) {
+            const { message } = wsEvent.data as { message: string };
             updateMessage(currentMessageId, (msg) => ({
               ...msg,
-              content: msg.content + "\n\n[Error occurred]",
+              content: msg.content + `\n\n❌ Error: ${message || "Unknown error"}`,
               isStreaming: false,
             }));
           }
@@ -110,6 +260,35 @@ export function useLocalChat() {
           break;
         }
 
+        case "tool_approval_required": {
+          // Human-in-the-Loop: AI wants to execute tools that need approval
+          const { action_requests, review_configs } = wsEvent.data as {
+            action_requests: Array<{
+              id: string;
+              tool_name: string;
+              args: Record<string, unknown>;
+            }>;
+            review_configs: Array<{
+              tool_name: string;
+              allow_edit?: boolean;
+              timeout?: number;
+            }>;
+          };
+          setPendingApproval({
+            actionRequests: action_requests,
+            reviewConfigs: review_configs,
+          });
+          // Show pending tools in the current message
+          if (currentMessageId) {
+            const toolNames = action_requests.map((ar) => ar.tool_name).join(", ");
+            updateMessage(currentMessageId, (msg) => ({
+              ...msg,
+              content: msg.content + `\n\n⏸️ Waiting for approval: ${toolNames}`,
+            }));
+          }
+          break;
+        }
+
         case "complete": {
           setIsProcessing(false);
           break;
@@ -151,6 +330,49 @@ export function useLocalChat() {
     createConversation();
   }, [createConversation]);
 
+  // Human-in-the-Loop: send resume message with user decisions
+  const sendResumeDecisions = useCallback(
+    (decisions: Decision[]) => {
+      // Clear pending approval state
+      setPendingApproval(null);
+
+      // Update message to show decisions were made
+      if (currentMessageId) {
+        const approvedCount = decisions.filter((d) => d.type === "approve").length;
+        const editedCount = decisions.filter((d) => d.type === "edit").length;
+        const rejectedCount = decisions.filter((d) => d.type === "reject").length;
+
+        const summaryParts: string[] = [];
+        if (approvedCount > 0) summaryParts.push(`${approvedCount} approved`);
+        if (editedCount > 0) summaryParts.push(`${editedCount} edited`);
+        if (rejectedCount > 0) summaryParts.push(`${rejectedCount} rejected`);
+
+        updateMessage(currentMessageId, (msg) => ({
+          ...msg,
+          content: msg.content.replace(
+            /\n\n⏸️ Waiting for approval:.*$/,
+            `\n\n✅ Decisions: ${summaryParts.join(", ")}`
+          ),
+        }));
+      }
+
+      // Send resume message to WebSocket
+      sendMessage({
+        type: "resume",
+        decisions: decisions.map((d) => {
+          if (d.type === "edit" && d.editedAction) {
+            return {
+              type: "edit",
+              edited_action: d.editedAction,
+            };
+          }
+          return { type: d.type };
+        }),
+      });
+    },
+    [currentMessageId, updateMessage, sendMessage]
+  );
+
   return {
     messages,
     currentConversationId,
@@ -161,5 +383,8 @@ export function useLocalChat() {
     sendMessage: sendChatMessage,
     clearMessages: clearCurrentMessages,
     startNewChat,
+    // Human-in-the-Loop support
+    pendingApproval,
+    sendResumeDecisions,
   };
 }

fastapi_gen/template/{{cookiecutter.project_slug}}/frontend/src/lib/constants.ts

@@ -36,4 +36,4 @@ export const ROUTES = {
 } as const;
 
 // WebSocket URL (for chat - this needs to be direct to backend for WS)
-export const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8000";
+export const WS_URL = process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:{{ cookiecutter.backend_port }}";