diff --git a/examples/integrations/agno/fixtures/default.json b/examples/integrations/agno/fixtures/default.json index ad8bd4a3eb2..a7ac59584a4 100644 --- a/examples/integrations/agno/fixtures/default.json +++ b/examples/integrations/agno/fixtures/default.json @@ -6,6 +6,30 @@ "content": "Hello! I'm the agno AI assistant. How can I help you?" } }, + { + "match": { "userMessage": "weather in San Francisco" }, + "response": { + "content": "The weather in San Francisco is: 70 degrees and Sunny." + } + }, + { + "match": { "userMessage": "theme to green" }, + "response": { + "content": "Done! I've changed the theme color to green (#22c55e). The page background and accent colors should now reflect the new theme." + } + }, + { + "match": { "userMessage": "price of Apple stock" }, + "response": { + "content": "Here is the latest price information for Apple Inc. (AAPL):\n\n| Symbol | Price | Change | Change % |\n|--------|---------|---------|----------|\n| AAPL | $213.49 | +1.24 | +0.58% |\n\n*Note: you are running against aimock โ€” this is a scripted fixture value, not a live quote.*" + } + }, + { + "match": { "userMessage": "proverb about AI" }, + "response": { + "content": "Added a new proverb: *\"An AI that learns from its mistakes is wiser than a human who repeats them.\"*\n\nYou should see it appear in the Proverbs panel on the left." + } + }, { "match": {}, "response": { diff --git a/examples/integrations/langgraph-js/fixtures/default.json b/examples/integrations/langgraph-js/fixtures/default.json index d3d5a863d7d..d222035bc50 100644 --- a/examples/integrations/langgraph-js/fixtures/default.json +++ b/examples/integrations/langgraph-js/fixtures/default.json @@ -1,29 +1,169 @@ { "fixtures": [ { - "match": { "userMessage": "Hello" }, + "match": { "toolCallId": "call_query_data_pie_001" }, "response": { - "content": "Hello! I'm your LangGraph-powered assistant. I can help you manage proverbs, get weather information, and more. What would you like to do?" + "content": "Here's your revenue distribution by category:\n\n- **Enterprise Subscriptions**: 38%\n- **Pro Tier Upgrades**: 24%\n- **API Usage Overages**: 14%\n- **Consulting Services**: 13%\n- **Marketplace Sales**: 11%\n\nEnterprise subscriptions are your largest revenue source. I've rendered this as a pie chart above." } }, { - "match": { "userMessage": "weather" }, + "match": { "toolCallId": "call_query_data_bar_001" }, + "response": { + "content": "Here are your expenses by category:\n\n- **Engineering Salaries**: $42,000\n- **Product Team**: $18,000\n- **Customer Success**: $15,000\n- **Marketing - Paid Ads**: $12,000\n- **AWS Infrastructure**: $8,200\n- **AI Model Costs**: $4,200\n\nEngineering salaries are your largest expense. I've rendered this as a bar chart above." + } + }, + { + "match": { "toolCallId": "call_query_data_dashboard_001" }, "response": { "toolCalls": [ { - "name": "getWeather", - "arguments": "{\"location\":\"New York\"}", - "id": "call_get_weather_001" + "name": "generate_a2ui", + "arguments": "{}", + "id": "call_generate_a2ui_001" } ] } }, + { + "match": { "toolCallId": "call_generate_a2ui_001" }, + "response": { + "content": "Here's your sales dashboard with total revenue, new customers, and conversion rate, plus a revenue-by-category pie chart and a monthly-sales bar chart, rendered above." + } + }, + { + "match": { "toolCallId": "call_search_flights_001" }, + "response": { + "content": "I found 2 flights from SFO to JFK next Tuesday: United UA 523 (8:15 AM, $329) and JetBlue B6 1042 (11:40 AM, $298). The cards are shown above." + } + }, + { + "match": { "toolCallId": "call_manage_todos_001" }, + "response": { + "content": "I've added three todos about learning CopilotKit:\n\n1. **Read the CopilotKit docs** - Skim the quickstart and core concepts\n2. **Build a prototype** - Wire CopilotKit into a small demo app\n3. **Explore agent state** - Experiment with shared state and tools\n\nAll three are pending. Want to mark any as done or add more?" + } + }, { "match": { "toolCallId": "call_get_weather_001" }, "response": { "content": "The weather in New York is 70 degrees with clear skies, 45% humidity, 5 mph wind, and feels like 72 degrees. A great day to be outside!" } }, + { + "match": { "toolCallId": "call_schedule_time_001" }, + "response": { + "content": "Your 30-minute meeting to learn about CopilotKit is scheduled. I've added it to your calendar โ€” let me know if you'd like to change the time." + } + }, + { + "match": { "userMessage": "Hello" }, + "response": { + "content": "Hello! I'm your LangGraph-powered assistant. I can help you manage proverbs, get weather information, and more. What would you like to do?" + } + }, + { + "match": { "userMessage": "pie chart of our revenue" }, + "response": { + "toolCalls": [ + { + "name": "query_data", + "arguments": "{\"query\":\"revenue distribution by category for a pie chart\"}", + "id": "call_query_data_pie_001" + } + ] + } + }, + { + "match": { "userMessage": "bar chart of our expenses" }, + "response": { + "toolCalls": [ + { + "name": "query_data", + "arguments": "{\"query\":\"expenses by category for a bar chart\"}", + "id": "call_query_data_bar_001" + } + ] + } + }, + { + "match": { "userMessage": "sales dashboard with total revenue" }, + "response": { + "toolCalls": [ + { + "name": "query_data", + "arguments": "{\"query\":\"financial sales data for a dashboard\"}", + "id": "call_query_data_dashboard_001" + } + ] + } + }, + { + "match": { "userMessage": "flights from SFO to JFK" }, + "response": { + "toolCalls": [ + { + "name": "search_flights", + "arguments": "{\"flights\":[{\"id\":\"fl_001\",\"airline\":\"United Airlines\",\"airlineLogo\":\"https://www.google.com/s2/favicons?domain=united.com&sz=64\",\"flightNumber\":\"UA 523\",\"origin\":\"SFO\",\"destination\":\"JFK\",\"date\":\"Tue, Jun 30\",\"departureTime\":\"8:15 AM\",\"arrivalTime\":\"4:45 PM\",\"duration\":\"5h 30m\",\"status\":\"On time\",\"statusIcon\":\"https://www.google.com/s2/favicons?domain=flightaware.com&sz=64\",\"price\":\"$329\"},{\"id\":\"fl_002\",\"airline\":\"JetBlue\",\"airlineLogo\":\"https://www.google.com/s2/favicons?domain=jetblue.com&sz=64\",\"flightNumber\":\"B6 1042\",\"origin\":\"SFO\",\"destination\":\"JFK\",\"date\":\"Tue, Jun 30\",\"departureTime\":\"11:40 AM\",\"arrivalTime\":\"8:05 PM\",\"duration\":\"5h 25m\",\"status\":\"On time\",\"statusIcon\":\"https://www.google.com/s2/favicons?domain=flightaware.com&sz=64\",\"price\":\"$298\"}]}", + "id": "call_search_flights_001" + } + ] + } + }, + { + "match": { "userMessage": "schedule a 30-minute meeting" }, + "response": { + "toolCalls": [ + { + "name": "scheduleTime", + "arguments": "{\"reasonForScheduling\":\"Learn about CopilotKit\",\"meetingDuration\":30}", + "id": "call_schedule_time_001" + } + ] + } + }, + { + "match": { "userMessage": "Use Excalidraw to create a simple network diagram" }, + "response": { + "content": "In a live run I'd use the Excalidraw MCP app to sketch a network diagram: one router connected to two switches, each connected to two computers. (This is a scripted mock reply -- add your OPENAI_API_KEY to .env to draw it for real.)" + } + }, + { + "match": { "userMessage": "build a modern calculator" }, + "response": { + "content": "In a live run I'd call the generateSandboxedUi tool to build a modern calculator with standard buttons plus labeled metric shortcuts that insert sample company values into the display. (This is a scripted mock reply -- add your OPENAI_API_KEY to .env to generate the live app.)" + } + }, + { + "match": { "userMessage": "Toggle the app theme" }, + "response": { + "toolCalls": [ + { "name": "toggleTheme", "arguments": "{}", "id": "call_toggle_theme_001" } + ] + } + }, + { + "match": { "userMessage": "add three todos about learning CopilotKit" }, + "response": { + "toolCalls": [ + { + "name": "manage_todos", + "arguments": "{\"todos\":[{\"title\":\"Read the CopilotKit docs\",\"description\":\"Skim the quickstart and core concepts\",\"emoji\":\"๐Ÿ“š\",\"status\":\"pending\"},{\"title\":\"Build a prototype\",\"description\":\"Wire CopilotKit into a small demo app\",\"emoji\":\"๐Ÿ› ๏ธ\",\"status\":\"pending\"},{\"title\":\"Explore agent state\",\"description\":\"Experiment with shared state and tools\",\"emoji\":\"๐Ÿง \",\"status\":\"pending\"}]}", + "id": "call_manage_todos_001" + } + ] + } + }, + { + "match": { "userMessage": "weather" }, + "response": { + "toolCalls": [ + { + "name": "getWeather", + "arguments": "{\"location\":\"New York\"}", + "id": "call_get_weather_001" + } + ] + } + }, { "match": {}, "response": { diff --git a/examples/integrations/langgraph-python/fixtures/default.json b/examples/integrations/langgraph-python/fixtures/default.json index b0848051449..0781d189197 100644 --- a/examples/integrations/langgraph-python/fixtures/default.json +++ b/examples/integrations/langgraph-python/fixtures/default.json @@ -3,7 +3,7 @@ { "match": { "toolCallId": "call_manage_todos_001" }, "response": { - "content": "I've added the tasks to your todo list:\n\n1. **Review project plan** - Go through the Q2 project plan and provide feedback\n2. **Update documentation** - Update the API docs with the new endpoints\n\nBoth tasks are currently pending. Would you like to modify any of them or add more tasks?" + "content": "I've added the tasks to your todo list:\n\n1. **Read the docs** - Read the CopilotKit documentation\n2. **Build a prototype** - Build a small CopilotKit prototype\n3. **Explore agent state** - Explore CopilotKit shared agent state\n\nAll three tasks are currently pending. Would you like to modify any of them or add more tasks?" } }, { @@ -12,6 +12,48 @@ "content": "Here are your current todos:\n\n1. **Review project plan** - Go through the Q2 project plan and provide feedback (pending)\n2. **Update documentation** - Update the API docs with the new endpoints (pending)\n\nYou have 2 tasks, both pending. Would you like to update or add any tasks?" } }, + { + "match": { "toolCallId": "call_query_data_pie_001" }, + "response": { + "toolCalls": [ + { + "name": "pieChart", + "arguments": "{\"title\":\"Revenue Distribution by Category\",\"description\":\"Share of total revenue across product categories\",\"data\":[{\"label\":\"Enterprise\",\"value\":2100000},{\"label\":\"Mid-Market\",\"value\":1500000},{\"label\":\"SMB\",\"value\":1200000},{\"label\":\"Self-Serve\",\"value\":800000}]}", + "id": "call_pie_chart_001" + } + ] + } + }, + { + "match": { "toolCallId": "call_query_data_bar_001" }, + "response": { + "toolCalls": [ + { + "name": "barChart", + "arguments": "{\"title\":\"Expenses by Category\",\"description\":\"Operating expenses across the business\",\"data\":[{\"label\":\"Salaries\",\"value\":1800000},{\"label\":\"Infrastructure\",\"value\":640000},{\"label\":\"Marketing\",\"value\":420000},{\"label\":\"R&D\",\"value\":520000},{\"label\":\"Operations\",\"value\":310000}]}", + "id": "call_bar_chart_001" + } + ] + } + }, + { + "match": { "toolCallId": "call_pie_chart_001" }, + "response": { + "content": "Here's the revenue distribution as a pie chart. Enterprise leads at $2.1M, followed by Mid-Market ($1.5M), SMB ($1.2M), and Self-Serve ($0.8M). Want me to break any segment down further?" + } + }, + { + "match": { "toolCallId": "call_bar_chart_001" }, + "response": { + "content": "Here's the expense breakdown as a bar chart. Salaries are the largest line at $1.8M, with Infrastructure ($0.64M), R&D ($0.52M), Marketing ($0.42M), and Operations ($0.31M) following. Want to compare this against revenue?" + } + }, + { + "match": { "toolCallId": "call_query_data_dashboard_001" }, + "response": { + "content": "Here's your sales dashboard:\n\n- **Total Revenue**: $6.6M (up 20% QoQ)\n- **New Customers**: 1,240\n- **Conversion Rate**: 3.8%\n\nRevenue is trending up steadily across all four quarters. Want me to drill into any of these metrics?" + } + }, { "match": { "toolCallId": "call_query_data_001" }, "response": { @@ -19,39 +61,105 @@ } }, { - "match": { "userMessage": "Hello" }, + "match": { "toolCallId": "call_schedule_time_001" }, "response": { - "content": "Hello! I'm your todo app assistant. I can help you manage your tasks, query data, and more. Here's what I can do:\n\n- **Manage Todos** - Add, update, or remove tasks\n- **View Todos** - See your current task list\n- **Query Data** - Look up and analyze data\n- **Search Flights** - Find flight information\n\nWhat would you like to do today?" + "content": "Your 30-minute meeting to learn about CopilotKit is scheduled. I've added it to your calendar โ€” let me know if you'd like to change the time." } }, { - "match": { "userMessage": "Task Manager" }, + "match": { "userMessage": "pie chart of our revenue" }, "response": { "toolCalls": [ { - "name": "manage_todos", - "arguments": "{\"todos\":[{\"title\":\"Review project plan\",\"description\":\"Go through the Q2 project plan and provide feedback\",\"emoji\":\"๐Ÿ“‹\",\"status\":\"pending\"},{\"title\":\"Update documentation\",\"description\":\"Update the API docs with the new endpoints\",\"emoji\":\"๐Ÿ“\",\"status\":\"pending\"}]}", - "id": "call_manage_todos_001" + "name": "query_data", + "arguments": "{\"query\":\"Show revenue distribution by category as a pie chart\"}", + "id": "call_query_data_pie_001" + } + ] + } + }, + { + "match": { "userMessage": "bar chart of our expenses" }, + "response": { + "toolCalls": [ + { + "name": "query_data", + "arguments": "{\"query\":\"Show expenses by category as a bar chart\"}", + "id": "call_query_data_bar_001" } ] } }, { - "match": { "userMessage": "Pie Chart" }, + "match": { "userMessage": "schedule a 30-minute meeting to learn about CopilotKit" }, + "response": { + "toolCalls": [ + { + "name": "scheduleTime", + "arguments": "{\"reasonForScheduling\":\"Learn about CopilotKit\",\"meetingDuration\":30}", + "id": "call_schedule_time_001" + } + ] + } + }, + { + "match": { "userMessage": "flights from SFO to JFK" }, + "response": { + "content": "I found a few options for flights from SFO to JFK next Tuesday:\n\n- **UA 1234** โ€” departs 7:30 AM, arrives 4:05 PM, 1 stop, $312\n- **DL 5678** โ€” departs 10:15 AM, arrives 6:50 PM, nonstop, $389\n- **AA 9012** โ€” departs 1:40 PM, arrives 10:20 PM, nonstop, $415\n\nWould you like me to hold one of these for you?" + } + }, + { + "match": { "userMessage": "sales dashboard with total revenue, new customers, and conversion rate" }, "response": { "toolCalls": [ { "name": "query_data", - "arguments": "{\"query\":\"Show quarterly revenue data as a pie chart\",\"format\":\"pie_chart\"}", - "id": "call_query_data_001" + "arguments": "{\"query\":\"Fetch financial sales data for a sales dashboard with revenue, customers, and conversion rate\"}", + "id": "call_query_data_dashboard_001" } ] } }, { - "match": { "userMessage": "Toggle Theme" }, + "match": { "userMessage": "Use Excalidraw to create a simple network diagram" }, + "response": { + "content": "Here's a simple network diagram for your topology:\n\n```\n [Router]\n / \\\n [Switch A] [Switch B]\n / \\ / \\\n [PC 1] [PC 2] [PC 3] [PC 4]\n```\n\nThe router connects to two switches, and each switch connects to two computers. In the live demo this renders as an interactive Excalidraw diagram via the Excalidraw MCP app." + } + }, + { + "match": { "userMessage": "build a modern calculator" }, + "response": { + "content": "Here's the plan for your generative calculator app:\n\n- **Standard keypad** โ€” digits 0-9, decimal point, and the four operators (+, -, ร—, รท) with clear and equals.\n- **Metric shortcut buttons** โ€” labeled chips for **Total Revenue ($6.6M)**, **New Customers (1,240)**, and **Conversion Rate (3.8%)** that insert their value into the display when clicked.\n- **Live display** โ€” shows the running expression and result.\n\nIn the live demo this renders as a fully interactive sandboxed UI via the generateSandboxedUi tool." + } + }, + { + "match": { "userMessage": "Toggle the app theme using the toggleTheme tool" }, "response": { - "content": "I've toggled the theme for you. The application should now be displaying in the alternate color scheme. Let me know if you'd like to switch back or if there's anything else I can help with!" + "toolCalls": [ + { + "name": "toggleTheme", + "arguments": "{}", + "id": "call_toggle_theme_001" + } + ] + } + }, + { + "match": { "userMessage": "add three todos about learning CopilotKit" }, + "response": { + "toolCalls": [ + { + "name": "manage_todos", + "arguments": "{\"todos\":[{\"title\":\"Read the docs\",\"description\":\"Read the CopilotKit documentation\",\"emoji\":\"๐Ÿ“š\",\"status\":\"pending\"},{\"title\":\"Build a prototype\",\"description\":\"Build a small CopilotKit prototype\",\"emoji\":\"๐Ÿ› ๏ธ\",\"status\":\"pending\"},{\"title\":\"Explore agent state\",\"description\":\"Explore CopilotKit shared agent state\",\"emoji\":\"๐Ÿง \",\"status\":\"pending\"}]}", + "id": "call_manage_todos_001" + } + ] + } + }, + { + "match": { "userMessage": "Hello" }, + "response": { + "content": "Hello! I'm your todo app assistant. I can help you manage your tasks, query data, and more. Here's what I can do:\n\n- **Manage Todos** - Add, update, or remove tasks\n- **View Todos** - See your current task list\n- **Query Data** - Look up and analyze data\n- **Search Flights** - Find flight information\n\nWhat would you like to do today?" } }, { diff --git a/examples/integrations/llamaindex/fixtures/default.json b/examples/integrations/llamaindex/fixtures/default.json index fc34c7882b0..8a618d57d0c 100644 --- a/examples/integrations/llamaindex/fixtures/default.json +++ b/examples/integrations/llamaindex/fixtures/default.json @@ -6,6 +6,24 @@ "content": "Hello! I'm the llamaindex AI assistant. How can I help you?" } }, + { + "match": { "userMessage": "theme to orange" }, + "response": { + "content": "Sure! I'll change the background to orange for you. ๐ŸŽจ I'm calling the `change_theme_color` tool with `#f97316` (a nice orange). You should see the app background update in real-time." + } + }, + { + "match": { "userMessage": "proverb about AI" }, + "response": { + "content": "Here's a proverb about AI: \"A wise AI knows what it doesn't know.\" I'm adding it to the proverbs list via the `add_proverb` tool โ€” you should see it appear on the page momentarily." + } + }, + { + "match": { "userMessage": "weather in SF" }, + "response": { + "content": "Let me check the weather in San Francisco for you! ๐ŸŒค๏ธ According to my data, the weather in San Francisco is sunny and 70 degrees. Perfect weather for a stroll along the Embarcadero!" + } + }, { "match": {}, "response": { diff --git a/examples/integrations/mastra/fixtures/default.json b/examples/integrations/mastra/fixtures/default.json index 37a9f610c3c..63d63c7eacc 100644 --- a/examples/integrations/mastra/fixtures/default.json +++ b/examples/integrations/mastra/fixtures/default.json @@ -6,22 +6,76 @@ "content": "Hello! I'm your Mastra-powered assistant. I can help you with weather information and more. What would you like to know?" } }, + { + "match": { "toolCallId": "call_get_weather_001" }, + "response": { + "content": "The weather in San Francisco is currently 70ยฐF with clear skies, 45% humidity, and a light breeze at 5 mph. It feels like 72ยฐF. A beautiful day!" + } + }, { "match": { "userMessage": "weather" }, "response": { "toolCalls": [ { "name": "get-weather", - "arguments": "{\"location\":\"New York\"}", + "arguments": "{\"location\":\"San Francisco\"}", "id": "call_get_weather_001" } ] } }, { - "match": { "toolCallId": "call_get_weather_001" }, + "match": { "toolCallId": "call_set_theme_color_001" }, + "response": { + "content": "Done! I've set the theme color to green. Let me know if you'd like to try a different color." + } + }, + { + "match": { "userMessage": "theme to green" }, + "response": { + "toolCalls": [ + { + "name": "setThemeColor", + "arguments": "{\"themeColor\":\"green\"}", + "id": "call_set_theme_color_001" + } + ] + } + }, + { + "match": { "toolCallId": "call_go_to_moon_001" }, + "response": { + "content": "๐Ÿš€ We've made it to the moon! Thanks for confirming the trip. Where would you like to go next?" + } + }, + { + "match": { "userMessage": "go to the moon" }, + "response": { + "toolCalls": [ + { + "name": "go_to_moon", + "arguments": "{}", + "id": "call_go_to_moon_001" + } + ] + } + }, + { + "match": { "userMessage": "remove 1 random proverb" }, + "response": { + "content": "I've removed one proverb from the list. The remaining proverbs are still saved in the agent's shared state. Want me to add a new one or show you what's left?" + } + }, + { + "match": { "userMessage": "What are the proverbs" }, + "response": { + "content": "Here are the current proverbs in the list:\n\n1. \"CopilotKit may be new, but it's the best thing since sliced bread.\"\n\nWould you like me to add another proverb or remove one?" + } + }, + { + "match": { "userMessage": "proverb about AI" }, "response": { - "content": "The weather in New York is currently 70ยฐF with clear skies, 45% humidity, and a light breeze at 5 mph. It feels like 72ยฐF. A beautiful day!" + "content": "I've added a new proverb about AI to the list:\n\n\"An AI that explains itself is worth two that work in silence.\"\n\nIt's now saved in the agent's shared state. Want to add another or review the full list?" } }, { diff --git a/examples/integrations/pydantic-ai/fixtures/default.json b/examples/integrations/pydantic-ai/fixtures/default.json index 065bbb91261..7e425b60204 100644 --- a/examples/integrations/pydantic-ai/fixtures/default.json +++ b/examples/integrations/pydantic-ai/fixtures/default.json @@ -6,6 +6,24 @@ "content": "Hello! I'm the pydantic-ai AI assistant. How can I help you?" } }, + { + "match": { "userMessage": "what can you do" }, + "response": { + "content": "I can help you manage and discuss proverbs. I can show you the current list, add new proverbs, replace the whole list, or just chat about them. I can also look up the weather for any location, and change the app's theme color on request." + } + }, + { + "match": { "userMessage": "proverb" }, + "response": { + "content": "Here are the proverbs in your list so far: \"CopilotKit may be new, but it's the best thing since sliced bread.\" Would you like to add more, update the list, or discuss one of them?" + } + }, + { + "match": { "userMessage": "weather" }, + "response": { + "content": "I can look up the weather for any location! Which city or place would you like to check?" + } + }, { "match": {}, "response": { diff --git a/packages/angular/src/lib/components/chat/copilot-chat-input.ts b/packages/angular/src/lib/components/chat/copilot-chat-input.ts index 09a66a4dc15..02d025c6ba9 100644 --- a/packages/angular/src/lib/components/chat/copilot-chat-input.ts +++ b/packages/angular/src/lib/components/chat/copilot-chat-input.ts @@ -539,6 +539,12 @@ export class CopilotChatInput implements AfterViewInit, OnDestroy { } handleKeyDown(event: KeyboardEvent): void { + // Skip key handling during IME composition (e.g. CJK input). + // The compositionend event will fire separately when composition ends. + if (event.isComposing || event.keyCode === 229) { + return; + } + if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); this.send();