diff --git a/web/agent/main.py b/web/agent/main.py index 32b70f9..d89df81 100644 --- a/web/agent/main.py +++ b/web/agent/main.py @@ -15,7 +15,6 @@ from langgraph.prebuilt import ToolNode, tools_condition from langgraph.types import Command from langchain_mcp_adapters.client import MultiServerMCPClient from langchain_mcp_adapters.interceptors import MCPToolCallRequest, MCPToolCallResult -from copilotkit.langgraph import copilotkit_customize_config class AgentState(MessagesState): @@ -27,7 +26,6 @@ class AgentState(MessagesState): """ tools: List[Any] - # your_custom_agent_state: str = "" # @tool @@ -130,19 +128,13 @@ async def chat_node(state: AgentState, config: RunnableConfig) -> dict: content=f"You are a helpful assistant with access to cave-related information through the Cavepedia MCP server. You can help users find information about caves, caving techniques, and related topics. User roles: {', '.join(user_roles) if user_roles else 'none'}" ) - # 3.5 Customize config for CopilotKit to properly handle message streaming - modified_config = copilotkit_customize_config( - config, - emit_messages=True, - ) - # 4. Run the model to generate a response response = await model_with_tools.ainvoke( [ system_message, *state["messages"], ], - modified_config, + config, ) # 5. Return the response in the messages diff --git a/web/src/app/globals.css b/web/src/app/globals.css index 741889f..dac608a 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -249,6 +249,11 @@ html { to { opacity: 1; transform: scale(1); } } +/* Hide CopilotKit's built-in loading indicator */ +.copilotKitActivityDot { + display: none !important; +} + @media (max-width: 600px) { .main-card-wrapper { padding: 2rem; diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx index 45e5846..19c3b59 100644 --- a/web/src/app/layout.tsx +++ b/web/src/app/layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout({ - + {children} diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index 6afaaa8..300de31 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCopilotAction, useUser as useCopilotUser } from "@copilotkit/react-core"; +import { useCopilotAction, useCopilotChat } from "@copilotkit/react-core"; import { CopilotKitCSSProperties, CopilotChat } from "@copilotkit/react-ui"; import { useState } from "react"; import { useUser } from "@auth0/nextjs-auth0/client"; @@ -10,7 +10,8 @@ import Profile from "@/components/Profile"; export default function CopilotKitPage() { const [themeColor, setThemeColor] = useState("#6366f1"); - const { user, isLoading } = useUser(); + const { user, isLoading: authLoading } = useUser(); + const { isLoading: chatLoading } = useCopilotChat(); useCopilotAction({ name: "setThemeColor", @@ -25,7 +26,7 @@ export default function CopilotKitPage() { }); // Show loading state while checking authentication - if (isLoading) { + if (authLoading) { return (
@@ -92,7 +93,7 @@ export default function CopilotKitPage() {
{/* CopilotKit Chat */} -
+
+ {/* Loading overlay */} + {chatLoading && ( +
+
+ + + +
+ Thinking... +
+ )}
);