+ {status !== "complete" && "Calling weather API..."} + {status === "complete" && `Called the weather API for ${args.location}.`} +
+ ); + }, + }); + // ... +} +``` + +
+
+ );
+ },
+ });
+
+ // ...
+ }
+ ```
+
+ Now you need to indicate to the Agent that they can use this tool similarly how you defined backend tools.
+
+ Hello, {args.name}!
+You're currently on {window.location.href}
+
+
+
+## What is Generative UI?
+
+Generative UI lets you render your agent's state, progress, outputs, and tool calls with custom UI components in real-time. It bridges the gap between AI
+agents and user interfaces. As your Agent Spec agent processes information and makes decisions, you can render custom UI components that:
+
+- Show loading states and progress indicators
+- Display structured data in tables, cards, or charts
+- Create interactive elements for user input
+
+## How can I use this?
+
+To get started, you first need to decide what is going to be backing your generative UI. Currently, there are two main variants of Generative UI with CopilotKit for Agent Spec.
+
+
+ {/* [!code highlight:2] */}
+
+
+
+ );
+ },
+ });
+
+ // ...
+ }
+ ```
+ @@ -133,7 +133,7 @@ The shortcut to use to open the editor popover window. Default is `"Cmd-k"`.
diff --git a/docs/content/docs/reference/components/chat/CopilotPopup.mdx b/docs/content/docs/reference/components/chat/CopilotPopup.mdx index eb93d7999b..a15500d960 100644 --- a/docs/content/docs/reference/components/chat/CopilotPopup.mdx +++ b/docs/content/docs/reference/components/chat/CopilotPopup.mdx @@ -7,7 +7,7 @@ description: "The CopilotPopup component, providing a popup interface for intera /* * ATTENTION! DO NOT MODIFY THIS FILE! * This page is auto-generated. If you want to make any changes to this page, changes must be made at: - * CopilotKit/packages/react-ui/src/components/chat/Popup.tsx + * src/v1.x/packages/react-ui/src/components/chat/Popup.tsx */ }
diff --git a/docs/content/docs/reference/components/chat/CopilotSidebar.mdx b/docs/content/docs/reference/components/chat/CopilotSidebar.mdx index f7938cb9fe..20074a4cfe 100644 --- a/docs/content/docs/reference/components/chat/CopilotSidebar.mdx +++ b/docs/content/docs/reference/components/chat/CopilotSidebar.mdx @@ -7,7 +7,7 @@ description: "The CopilotSidebar component, providing a sidebar interface for in /* * ATTENTION! DO NOT MODIFY THIS FILE! * This page is auto-generated. If you want to make any changes to this page, changes must be made at: - * CopilotKit/packages/react-ui/src/components/chat/Sidebar.tsx + * src/v1.x/packages/react-ui/src/components/chat/Sidebar.tsx */ }
diff --git a/docs/content/docs/reference/hooks/useCoAgent.mdx b/docs/content/docs/reference/hooks/useCoAgent.mdx index ef43685b06..b8c487f822 100644 --- a/docs/content/docs/reference/hooks/useCoAgent.mdx +++ b/docs/content/docs/reference/hooks/useCoAgent.mdx @@ -7,7 +7,7 @@ description: "The useCoAgent hook allows you to share state bidirectionally betw /* * ATTENTION! DO NOT MODIFY THIS FILE! * This page is auto-generated. If you want to make any changes to this page, changes must be made at: - * CopilotKit/packages/react-core/src/hooks/use-coagent.ts + * src/v1.x/packages/react-core/src/hooks/use-coagent.ts */ }
-
-
-
- )
-}
diff --git a/registry/components/ui/tooltip.tsx b/registry/components/ui/tooltip.tsx
deleted file mode 100644
index 28e19183f4..0000000000
--- a/registry/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils"
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
- React.ElementRefCustom Registry
-- A custom registry for distribution code using shadcn. -
-Inputs submitted
;
- },
- });
-
- // Render the crew's state in real-time
- useCoAgentStateRender({
- name: agentName,
- render: ({ state, status }) => (
- Inputs submitted
;\n },\n });\n\n // Render the crew's state in real-time\n useCoAgentStateRender({\n name: agentName,\n render: ({ state, status }) => (\n Inputs submitted
;\n }\n\n return (\n \n {inputs.map((input) => (\n \n \n
\n ))}\n Loading crew state...
;\n }\n\n // Hide entirely if collapsed & empty & not in progress\n if (isCollapsed && items.length === 0 && status !== \"inProgress\") return null;\n\n return (\n \n setIsCollapsed(!isCollapsed)}\n >\n {isCollapsed ? \"▶\" : \"▼\"}\n \n {status === \"inProgress\" ? \n Crew is analyzing... : \n Crew analysis\n }\n {!isCollapsed && items.length > 0 && ` (${items.length} steps)`}\n \n
\n\n {!isCollapsed && (\n \n {isTool\n ? (item as CrewsToolStateItem).tool\n : (item as CrewsTaskStateItem).name}\n
\n {\"thought\" in item && item.thought && (\n \n Thought: {item.thought}\n
\n )}\n {\"result\" in item && item.result !== undefined && (\n \n {typeof item.result === 'object' \n ? JSON.stringify(item.result, null, 2)\n : item.result}\n \n )}\n {\"description\" in item && item.description && (\n {item.description}
\n )}\n \n );\n })\n ) : (\n No activity yet...
\n )}\n \n )}\n\n {/* Custom animation for highlighting new items */}\n \n \n );\n}\n\nexport default CrewStateRenderer;\n",
- "type": "registry:component",
- "target": "components/crew-state-renderer.tsx"
- },
- {
- "path": "registry/crews/crew-human-feedback-renderer.tsx",
- "content": "import { CrewsResponseStatus, CrewsStateItem } from \"@copilotkit/react-core\";\nimport { Markdown } from \"@copilotkit/react-ui\";\nimport { useState } from \"react\";\n\n/**\n * Interface defining the feedback structure requested by the crew agents\n */\nexport interface CrewsFeedback extends CrewsStateItem {\n /**\n * Output of the task execution that requires user feedback\n */\n task_output?: string;\n}\n\n/**\n * Component that renders a UI for agent-requested user feedback\n * \n * This component presents the task output from the crew and provides\n * buttons for the user to approve or reject the proposed solution.\n * \n * @param feedback - The feedback object containing task output\n * @param respond - Callback function to send user response back to the crew\n * @param status - Current status of the feedback request\n */\nfunction CrewHumanFeedbackRenderer({\n feedback,\n respond,\n status,\n}: {\n feedback: CrewsFeedback;\n respond?: (input: string) => void;\n status: CrewsResponseStatus;\n}) {\n const [isExpanded, setIsExpanded] = useState(true);\n const [userResponse, setUserResponse] = useState\n {userResponse || \"Feedback submitted.\"}\n
\n );\n }\n\n // If feedback request is in progress, show the feedback UI\n if (status === \"inProgress\" || status === \"executing\") {\n return (\n \n
\n );\n }\n\n return null;\n}\n\nexport default CrewHumanFeedbackRenderer;\n",
- "type": "registry:component",
- "target": "components/crew-human-feedback-renderer.tsx"
- },
- {
- "path": "registry/layout/coagents-crew-starter-layout.tsx",
- "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport React from \"react\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport { CopilotKit } from \"@copilotkit/react-core\";\n\n// Read environment variables for copilot configuration\nconst apiKey = process.env.NEXT_PUBLIC_COPILOT_API_KEY || \"\";\nconst agentName = process.env.NEXT_PUBLIC_COPILOTKIT_AGENT_NAME || \"DefaultAgent\";\n\n/**\n * Layout component for the CopilotKit interface\n * \n * This component creates a two-column layout:\n * 1. Left column (60%): Chat interface for user interaction\n * 2. Right column (40%): Results panel to display crew output\n * \n * It configures CopilotKit with environment variables for API key and agent name\n * and provides optimized styling for both light and dark modes.\n */\nexport default function CoagentsCrewStarterLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n setIsExpanded(!isExpanded)}\n >\n {isExpanded ? \"Hide\" : \"Show\"} Details\n \n
\n\n {isExpanded && (\n Feedback Required
\n\n
\n )}\n \n \n {\n setUserResponse(\"Rejected\");\n // Send 'Reject' feedback to the crew\n respond?.(\"Reject\");\n }}\n >\n Reject\n \n {\n setUserResponse(\"Approved\");\n // Send 'Approve' feedback to the crew\n respond?.(\"Approve\");\n }}\n >\n Approve\n \n
\n \n
\n \n {/* Chat Column */}\n
\n \n
\n\n {/* Results Column */}\n \n
\n \n {children}\n
\n - $&
tags for pre-formatted text\n return formatted.replace(/\\n/g, \"
\");\n } else {\n // For unformatted text, add proper spacing\n // Add double line breaks before numbered items\n formatted = formatted.replace(/(\\d+\\.)/g, \"
$1\");\n\n // Add single line breaks before properties\n formatted = formatted.replace(/(\\s-\\s)/g, \"
$1\");\n\n return formatted;\n }\n}\n\n/**\n * Main component for the Copilot Crew interface\n * \n * This component:\n * 1. Initializes the crew with required input fields\n * 2. Renders the formatted output from the crew\n * 3. Provides a clean, readable interface for users\n */\nexport default function CoagentsCrewStarter() {\n const { output } = useCoagentsCrewStarter({\n /**\n * Define the input fields needed to start your crew.\n * These will be presented as a form in the chat interface.\n */\n inputs: [\"YOUR_INPUTS_HERE\"],\n });\n\n return (\n
\n
\n );\n}\n",
- "type": "registry:page",
- "target": "app/copilotkit/page.tsx"
- }
- ]
-}
\ No newline at end of file
diff --git a/registry/public/r/coagents-starter-crewai-flows.json b/registry/public/r/coagents-starter-crewai-flows.json
deleted file mode 100644
index 85fef1c65d..0000000000
--- a/registry/public/r/coagents-starter-crewai-flows.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "$schema": "https://ui.shadcn.com/schema/registry-item.json",
- "name": "coagents-starter-crewai-flows",
- "type": "registry:page",
- "title": "Coagents Starter CrewAI Flows",
- "description": "Quickstart for CopilotKit and CrewAI Flows on CrewAI Enterprise.",
- "dependencies": [
- "@copilotkit/react-core",
- "@copilotkit/react-ui"
- ],
- "files": [
- {
- "path": "registry/quickstarts/coagents-starter-crewai-flows/page.tsx",
- "content": "\"use client\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport { CopilotKit, useCopilotAction } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\nimport React, { useState } from \"react\";\n\nconst publicApiKey = process.env.NEXT_PUBLIC_COPILOT_API_KEY;\nconst agentName = process.env.NEXT_PUBLIC_COPILOTKIT_AGENT_NAME;\n\nif (!publicApiKey || !agentName) {\n throw new Error(\"Missing environment variables\");\n}\n\n// Main Chat Component: Handles chat interface and background customization\nconst Chat = () => {\n const [background, setBackground] = useState(\n \"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\"\n );\n\n // Action: Allow AI to change background color dynamically\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => setBackground(background),\n followUp: false,\n });\n\n return (\n \n Crew Results\n
\n \n {!output || output === \"Crew result will appear here...\" ? (\n\n
\n ) : (\n \n Waiting for input...\n
\n \n Results will appear here after providing inputs in the chat\n
\n \n \n
\n )}\n \n
\n \n );\n};\n\n// App Component: Main wrapper that provides CopilotKit context\nconst CrewAIFlow: React.FC = () => (\n \n
\n \n
\n
\n \n );\n}\n\n// Simple sun icon for the weather card\nfunction SunIcon() {\n return (\n \n );\n}\n\n// Weather card component where the location and themeColor are based on what the agent\n// sets via tool calls.\nfunction WeatherCard({ location, themeColor }: { location?: string, themeColor: string }) {\n return (\n Proverbs
\nThis is a demonstrative page, but it could be anything you want! 🪁
\n\n
\n {state.proverbs?.map((proverb, index) => (\n
\n {state.proverbs?.length === 0 && \n
\n ))}\n {proverb}
\n \n\n No proverbs yet. Ask the assistant to add some!\n
}\n\n
\n \n );\n}\n",
- "type": "registry:page",
- "target": "app/copilotkit/page.tsx"
- }
- ]
-}
\ No newline at end of file
diff --git a/registry/public/r/crew-quickstart.json b/registry/public/r/crew-quickstart.json
deleted file mode 100644
index 4183bde6c1..0000000000
--- a/registry/public/r/crew-quickstart.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "$schema": "https://ui.shadcn.com/schema/registry-item.json",
- "name": "crew-quickstart",
- "type": "registry:page",
- "title": "Crew Enterprise Quickstart",
- "description": "A quickstart guide for setting up CopilotKit in an enterprise environment with a crew.",
- "dependencies": [
- "@copilotkit/react-core",
- "@copilotkit/runtime-client-gql"
- ],
- "files": [
- {
- "path": "hooks/crew-quickstart/use-crew-quickstart.tsx",
- "content": "\"use client\";\n\nimport {\n CrewsAgentState,\n CrewsResponseStatus,\n CrewsStateItem,\n CrewsTaskStateItem,\n CrewsToolStateItem,\n useCoAgent,\n useCoAgentStateRender,\n useCopilotAction,\n useCopilotChat,\n useCopilotAdditionalInstructions,\n} from \"@copilotkit/react-core\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { MessageRole, TextMessage } from \"@copilotkit/runtime-client-gql\";\n\ninterface CrewsFeedback extends CrewsStateItem {\n /**\n * Output of the task execution\n */\n task_output?: string;\n}\n\n/**\n * Renders your Crew's steps & tasks in real-time.\n */\nfunction CrewStateRenderer({\n state,\n status,\n}: {\n state: CrewsAgentState;\n status: CrewsResponseStatus;\n}) {\n const [isCollapsed, setIsCollapsed] = useState(true);\n const contentRef = useRef\n
\n \n \n
\n {location}
\nCurrent Weather
\n\n
\n \n 70°
\n Clear skies
\n \n
\n \n
\n \n
\n Humidity
\n45%
\n\n
\n Wind
\n5 mph
\n\n
\n Feels Like
\n72°
\nLoading crew state...
;\n }\n\n // Hide entirely if collapsed & empty & not in progress\n if (isCollapsed && items.length === 0 && status !== \"inProgress\") return null;\n\n return (\n \n setIsCollapsed(!isCollapsed)}\n >\n {isCollapsed ? \"▶\" : \"▼\"}\n {status === \"inProgress\" ? \"Crew is analyzing...\" : \"Crew analysis\"}\n
\n\n {!isCollapsed && (\n \n {isTool\n ? (item as CrewsToolStateItem).tool\n : (item as CrewsTaskStateItem).name}\n
\n {\"thought\" in item && item.thought && (\n \n Thought: {item.thought}\n
\n )}\n {\"result\" in item && item.result !== undefined && (\n \n {JSON.stringify(item.result, null, 2)}\n \n )}\n {\"description\" in item && item.description && (\n {item.description}
\n )}\n \n );\n })\n ) : (\n No activity yet...
\n )}\n \n )}\n\n {/* Simple fadeIn animation */}\n \n \n );\n}\n\n/**\n * Renders a simple UI for agent-requested user feedback (Approve / Reject).\n */\nfunction CrewHumanFeedbackRenderer({\n feedback,\n respond,\n status,\n}: {\n feedback: CrewsFeedback;\n respond?: (input: string) => void;\n status: CrewsResponseStatus;\n}) {\n const [isExpanded, setIsExpanded] = useState(true);\n const [userResponse, setUserResponse] = useState\n {userResponse || \"Feedback submitted.\"}\n
\n );\n }\n\n if (status === \"inProgress\" || status === \"executing\") {\n return (\n \n {isExpanded && (\n \n {feedback.task_output}\n
\n )}\n \n setIsExpanded(!isExpanded)}\n >\n {isExpanded ? \"Hide\" : \"Show\"} Feedback\n \n {\n setUserResponse(\"Approved\");\n /**\n * This string is arbitrary. It can be any serializable input that will be forwarded to your Crew as feedback.\n */\n respond?.(\"Approve\");\n }}\n >\n Approve\n \n {\n setUserResponse(\"Rejected\");\n /**\n * This string is arbitrary. It can be any serializable input that will be forwarded to your Crew as feedback.\n */\n respond?.(\"Reject\");\n }}\n >\n Reject\n \n
\n \n );\n }\n\n return null;\n}\n\n/**\n * useCrewQuickstart\n * Minimal example that:\n * 1) Sets up a crew/agent\n * 2) Handles text-based user input (get_input)\n * 3) Renders real-time crew state\n * 4) Handles \"crew_requesting_feedback\"\n */\nexport const useCrewQuickstart = ({\n crewName,\n inputs,\n}: {\n crewName: string;\n inputs: Array\n { alert(\"Thumbs down\"); }}\n onThumbsUp={() => { alert(\"Thumbs up\"); }}\n className={running ? \"h-full py-6\" : \"h-full py-6 rounded-xl\"}\n labels={{\n initial: \"Hi! I'm connected to your LangGraph agent. Ask me anything, and I'll show what's happening behind the scenes.\",\n placeholder: \"Type your message...\",\n }}\n />\n
\n );\n}\n",
- "type": "registry:page",
- "target": "app/copilotkit/page.tsx"
- },
- {
- "path": "registry/quickstarts/coagents-generic-lg/layout.tsx",
- "content": "import type { Metadata } from \"next\";\n\nimport { CopilotKit } from \"@copilotkit/react-core\";\n\nimport \"@copilotkit/react-ui/styles.css\";\n\nexport const metadata: Metadata = {\n title: \"CoAgents Starter\",\n description: \"CoAgents Starter\",\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n
\n );\n}",
- "type": "registry:component",
- "target": "components/agent-state.tsx"
- },
- {
- "path": "registry/quickstarts/coagents-generic-lg/components/tool-call.tsx",
- "content": "import {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { CatchAllActionRenderProps } from \"@copilotkit/react-core\";\n\nexport function ToolCall(toolCallProps: CatchAllActionRenderProps) {\n const triggerStyles = \"inline-flex rounded-xl items-center gap-2 p-2 rounded bg-indigo-500/60 text-white cursor-pointer m-1\";\n const contentStyles = \"bg-white rounded-xl min-w-[300px] max-w-[500px] p-4 border\";\n const statusStyles = \"text-xs px-2 py-0.5 rounded-full bg-pink-200/40 text-white\";\n\n return (\n \n
\n \n \n {process.env.NEXT_PUBLIC_AGENT_NAME} state\n
\n\n {hasChanges && (\n \n Save\n \n )}\n \n
\n \n {isEditing ? (\n
\n \n
\n ) : (\n \n {editableState}\n \n )}\n \n 🔧 {toolCallProps.name}\n {toolCallProps.status}\n
\n \n
\n );\n}",
- "type": "registry:component",
- "target": "components/tool-call.tsx"
- },
- {
- "path": "registry/quickstarts/coagents-generic-lg/components/interrupt.tsx",
- "content": "import { LangGraphInterruptEvent } from \"@copilotkit/runtime-client-gql\";\nimport { useState } from \"react\";\n\nexport interface InterruptProps {\n event: LangGraphInterruptEvent;\n result: unknown;\n resolve: (resolution: string) => void;\n}\n\nexport function Interrupt({ event, resolve }: InterruptProps) {\n const [response, setResponse] = useState(\"\");\n\n const wrapperStyles = \"flex flex-col justify-center items-center h-full w-full bg-indigo-600/50 my-4 rounded-xl\";\n const titleStyles = \"text-lg font-semibold text-white\";\n const subtitleStyles = \"text-sm font-normal text-gray-200 mb-1\";\n const contentStyles = \"flex flex-col gap-2 p-4 w-full\";\n const textareaStyles = \"w-full p-2 rounded-xl focus:outline-purple-500 border shadow-inner min-h-[100px] bg-white\";\n const buttonStyles = \"px-4 py-2 bg-black text-white rounded-xl hover:bg-gray-700 transition-colors\";\n const eventStyles = \"h-[300px] w-full overflow-auto p-3\";\n const preStyles = \"whitespace-pre-wrap break-words text-sm m-0 w-full\";\n\n return (\n \n Name: {name}\n
\n \n Arguments: \n
\n \n {JSON.stringify(args, null, 2)}\n \n \n Status: {status}\n
\n \n Result: \n
\n \n {JSON.stringify(result, null, 2)}\n \n \n ;
+ @ContentChild("toolbar", { read: TemplateRef })
+ toolbarTemplate?: TemplateRef;
+ @ContentChild("textArea", { read: TemplateRef })
+ textAreaTemplate?: TemplateRef;
+ @ContentChild("audioRecorder", { read: TemplateRef })
+ audioRecorderTemplate?: TemplateRef;
+ @ContentChild("startTranscribeButton", { read: TemplateRef })
+ startTranscribeButtonTemplate?: TemplateRef;
+ @ContentChild("cancelTranscribeButton", { read: TemplateRef })
+ cancelTranscribeButtonTemplate?: TemplateRef;
+ @ContentChild("finishTranscribeButton", { read: TemplateRef })
+ finishTranscribeButtonTemplate?: TemplateRef;
+ @ContentChild("addFileButton", { read: TemplateRef })
+ addFileButtonTemplate?: TemplateRef;
+ @ContentChild("toolsButton", { read: TemplateRef })
+ toolsButtonTemplate?: TemplateRef;
+
+ // Class inputs for styling default components
+ sendButtonClass = input(undefined);
+ toolbarClass = input(undefined);
+ textAreaClass = input(undefined);
+ textAreaMaxRows = input(undefined);
+ textAreaPlaceholder = input(undefined);
+ audioRecorderClass = input(undefined);
+ startTranscribeButtonClass = input(undefined);
+ cancelTranscribeButtonClass = input(undefined);
+ finishTranscribeButtonClass = input(undefined);
+ addFileButtonClass = input(undefined);
+ toolsButtonClass = input(undefined);
+
+ // Component inputs for overrides
+ sendButtonComponent = input | undefined>(undefined);
+ toolbarComponent = input | undefined>(undefined);
+ textAreaComponent = input | undefined>(undefined);
+ audioRecorderComponent = input | undefined>(undefined);
+ startTranscribeButtonComponent = input | undefined>(undefined);
+ cancelTranscribeButtonComponent = input | undefined>(undefined);
+ finishTranscribeButtonComponent = input | undefined>(undefined);
+ addFileButtonComponent = input | undefined>(undefined);
+ toolsButtonComponent = input | undefined>(undefined);
+
+ // Regular inputs
+ mode = input(undefined);
+ toolsMenu = input<(ToolsMenuItem | "-")[] | undefined>(undefined);
+ autoFocus = input(undefined);
+ value = input(undefined);
+ inputClass = input(undefined);
+ // Note: Prefer host `class` for styling this component;
+ // keep only `inputClass` to style the internal wrapper if needed.
+ additionalToolbarItems = input | undefined>(undefined);
+
+ // Output events
+ submitMessage = output();
+ startTranscribe = output();
+ cancelTranscribe = output();
+ finishTranscribe = output();
+ addFile = output();
+ valueChange = output();
+
+ // Icons and default classes
+ readonly ArrowUpIcon = ArrowUp;
+ readonly defaultButtonClass = cn(
+ // Base button styles
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+ "transition-all disabled:pointer-events-none disabled:opacity-50",
+ "shrink-0 outline-none",
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+ // chatInputToolbarPrimary variant
+ "cursor-pointer",
+ "bg-black text-white",
+ "dark:bg-white dark:text-black dark:focus-visible:outline-white",
+ "rounded-full h-9 w-9",
+ "transition-colors",
+ "focus:outline-none",
+ "hover:opacity-70 disabled:hover:opacity-100",
+ "disabled:cursor-not-allowed disabled:bg-[#00000014] disabled:text-[rgb(13,13,13)]",
+ "dark:disabled:bg-[#454545] dark:disabled:text-white"
+ );
+
+ // Services
+ readonly labels = injectChatLabels();
+ // readonly chatConfig = injectChatConfig();
+ readonly chatState = injectChatState();
+
+ // Signals
+ modeSignal = signal("input");
+ toolsMenuSignal = signal<(ToolsMenuItem | "-")[]>([]);
+ autoFocusSignal = signal(true);
+ customClass = signal(undefined);
+
+ // Default components
+ // Note: CopilotChatTextarea uses attribute selector but is a component
+ defaultAudioRecorder = CopilotChatAudioRecorder;
+ defaultSendButton: any = null; // Will be set to avoid circular dependency
+ CopilotChatToolbar = CopilotChatToolbar;
+ CopilotChatAddFileButton = CopilotChatAddFileButton;
+ CopilotChatToolsMenu = CopilotChatToolsMenu;
+ CopilotChatCancelTranscribeButton = CopilotChatCancelTranscribeButton;
+ CopilotChatFinishTranscribeButton = CopilotChatFinishTranscribeButton;
+ CopilotChatStartTranscribeButton = CopilotChatStartTranscribeButton;
+
+ // Computed values
+ computedMode = computed(() => this.modeSignal());
+ computedToolsMenu = computed(() => this.toolsMenu() ?? []);
+ computedAutoFocus = computed(() => this.autoFocus() ?? true);
+ computedValue = computed(() => {
+ const customValue = this.value() ?? "";
+ const configValue = this.chatState.inputValue();
+ return customValue || configValue || "";
+ });
+
+ computedClass = computed(() => {
+ const baseClasses = cn(
+ // Layout
+ "flex w-full flex-col items-center justify-center",
+ // Interaction
+ "cursor-text",
+ // Overflow and clipping
+ "overflow-visible bg-clip-padding contain-inline-size",
+ // Background
+ "bg-white dark:bg-[#303030]",
+ // Visual effects
+ "shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]"
+ );
+ return cn(baseClasses, this.customClass());
+ });
+
+ // Context for slots (reactive via signals)
+ sendButtonContext = computed(() => ({
+ send: () => this.send(),
+ disabled:
+ !this.computedValue().trim() || this.computedMode() === "processing",
+ value: this.computedValue(),
+ }));
+
+ toolbarContext = computed(() => ({
+ mode: this.computedMode(),
+ value: this.computedValue(),
+ }));
+
+ textAreaContext = computed(() => ({
+ value: this.computedValue(),
+ autoFocus: this.computedAutoFocus(),
+ disabled: this.computedMode() === "processing",
+ maxRows: this.textAreaMaxRows(),
+ placeholder: this.textAreaPlaceholder(),
+ inputClass: this.textAreaClass(),
+ onKeyDown: (event: KeyboardEvent) => this.handleKeyDown(event),
+ onChange: (value: string) => this.handleValueChange(value),
+ }));
+
+ audioRecorderContext = computed(() => ({
+ inputShowControls: true,
+ }));
+
+ // Button contexts removed - now using outputs map for click handlers
+
+ toolsContext = computed(() => ({
+ inputToolsMenu: this.computedToolsMenu(),
+ inputDisabled: this.computedMode() === "transcribe",
+ }));
+
+ constructor() {
+ // Effect to handle mode changes (no signal writes)
+ effect(() => {
+ const currentMode = this.computedMode();
+ if (currentMode === "transcribe" && this.audioRecorderRef) {
+ this.audioRecorderRef.start().catch(console.error);
+ } else if (this.audioRecorderRef?.getState() === "recording") {
+ this.audioRecorderRef.stop().catch(console.error);
+ }
+ });
+ }
+
+ // Output maps for slots
+ addFileButtonOutputs = { clicked: () => this.handleAddFile() };
+ cancelTranscribeButtonOutputs = {
+ clicked: () => this.handleCancelTranscribe(),
+ };
+ finishTranscribeButtonOutputs = {
+ clicked: () => this.handleFinishTranscribe(),
+ };
+ startTranscribeButtonOutputs = {
+ clicked: () => this.handleStartTranscribe(),
+ };
+ // Support both `clicked` (idiomatic in our slots) and `click` (legacy)
+ sendButtonOutputs = { clicked: () => this.send(), click: () => this.send() };
+
+ ngAfterViewInit(): void {
+ // Auto-focus if needed
+ if (this.computedAutoFocus() && this.textAreaRef) {
+ setTimeout(() => {
+ this.textAreaRef?.focus();
+ });
+ }
+ }
+
+ ngOnDestroy(): void {
+ // Clean up any resources
+ if (this.audioRecorderRef?.getState() === "recording") {
+ this.audioRecorderRef?.stop().catch(console.error);
+ }
+ }
+
+ handleKeyDown(event: KeyboardEvent): void {
+ if (event.key === "Enter" && !event.shiftKey) {
+ event.preventDefault();
+ this.send();
+ }
+ }
+
+ handleValueChange(value: string): void {
+ this.valueChange.emit(value);
+ if (this.chatState) this.chatState.changeInput(value);
+ }
+
+ send(): void {
+ const trimmed = this.computedValue().trim();
+ if (trimmed) {
+ this.submitMessage.emit(trimmed);
+
+ this.chatState.submitInput(trimmed);
+
+ if (this.chatState) this.chatState.changeInput("");
+ if (this.textAreaRef) this.textAreaRef.setValue("");
+
+ // Refocus input
+ if (this.textAreaRef) {
+ setTimeout(() => {
+ this.textAreaRef?.focus();
+ });
+ }
+ }
+ }
+
+ handleStartTranscribe(): void {
+ this.startTranscribe.emit();
+ this.modeSignal.set("transcribe");
+ }
+
+ handleCancelTranscribe(): void {
+ this.cancelTranscribe.emit();
+ this.modeSignal.set("input");
+ }
+
+ handleFinishTranscribe(): void {
+ this.finishTranscribe.emit();
+ this.modeSignal.set("input");
+ }
+
+ handleAddFile(): void {
+ this.addFile.emit();
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-input.types.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-input.types.ts
new file mode 100644
index 0000000000..b6da757ab6
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-input.types.ts
@@ -0,0 +1,148 @@
+import type { Type, TemplateRef } from "@angular/core";
+
+/**
+ * Mode of the chat input component
+ */
+export type CopilotChatInputMode = "input" | "transcribe" | "processing";
+
+/**
+ * Represents a menu item in the tools menu
+ */
+export type ToolsMenuItem = {
+ label: string;
+} & (
+ | {
+ action: () => void;
+ items?: never;
+ }
+ | {
+ action?: never;
+ items: (ToolsMenuItem | "-")[];
+ }
+);
+
+/**
+ * Audio recorder state
+ */
+export type AudioRecorderState = "idle" | "recording" | "processing";
+
+/**
+ * Error class for audio recorder failures
+ */
+export class AudioRecorderError extends Error {
+ constructor(message: string) {
+ super(message);
+ this.name = "AudioRecorderError";
+ }
+}
+
+/**
+ * Props for textarea component
+ */
+export interface CopilotChatTextareaProps {
+ value?: string;
+ placeholder?: string;
+ maxRows?: number;
+ autoFocus?: boolean;
+ disabled?: boolean;
+ onChange?: (value: string) => void;
+ onKeyDown?: (event: KeyboardEvent) => void;
+ inputClass?: string;
+ style?: any;
+ rows?: number;
+ cols?: number;
+ readonly?: boolean;
+ spellcheck?: boolean;
+ wrap?: "hard" | "soft" | "off";
+}
+
+/**
+ * Props for button components
+ */
+export interface CopilotChatButtonProps {
+ disabled?: boolean;
+ onClick?: () => void;
+ inputClass?: string;
+ style?: any;
+ type?: "button" | "submit" | "reset";
+ ariaLabel?: string;
+ ariaPressed?: boolean;
+ ariaExpanded?: boolean;
+ title?: string;
+}
+
+/**
+ * Props for toolbar button with tooltip
+ */
+export interface CopilotChatToolbarButtonProps extends CopilotChatButtonProps {
+ icon?: TemplateRef;
+ tooltip?: string;
+ variant?: "primary" | "secondary";
+}
+
+/**
+ * Props for tools menu button
+ */
+export interface CopilotChatToolsButtonProps extends CopilotChatButtonProps {
+ toolsMenu?: (ToolsMenuItem | "-")[];
+}
+
+/**
+ * Props for audio recorder
+ */
+export interface CopilotChatAudioRecorderProps {
+ inputClass?: string;
+ style?: any;
+ onStateChange?: (state: AudioRecorderState) => void;
+ showControls?: boolean;
+ maxDuration?: number;
+}
+
+/**
+ * Props for toolbar
+ */
+export interface CopilotChatToolbarProps {
+ inputClass?: string;
+ style?: any;
+ position?: "top" | "bottom";
+ alignment?: "left" | "center" | "right" | "space-between";
+}
+
+/**
+ * Slot configuration for chat input
+ */
+export interface CopilotChatInputSlots {
+ textArea?: Type | TemplateRef;
+ sendButton?: Type | TemplateRef;
+ startTranscribeButton?: Type | TemplateRef;
+ cancelTranscribeButton?: Type | TemplateRef;
+ finishTranscribeButton?: Type | TemplateRef;
+ addFileButton?: Type | TemplateRef;
+ toolsButton?: Type | TemplateRef;
+ toolbar?: Type | TemplateRef;
+ audioRecorder?: Type | TemplateRef;
+}
+
+/**
+ * Input configuration for the chat input component
+ */
+export interface CopilotChatInputConfig {
+ mode?: CopilotChatInputMode;
+ toolsMenu?: (ToolsMenuItem | "-")[];
+ autoFocus?: boolean;
+ additionalToolbarItems?: TemplateRef;
+ value?: string;
+ class?: string;
+}
+
+/**
+ * Output events for the chat input component
+ */
+export interface CopilotChatInputOutputs {
+ submitMessage: (value: string) => void;
+ startTranscribe: () => void;
+ cancelTranscribe: () => void;
+ finishTranscribe: () => void;
+ addFile: () => void;
+ changeValue: (value: string) => void;
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view-cursor.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view-cursor.ts
new file mode 100644
index 0000000000..27cc145178
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view-cursor.ts
@@ -0,0 +1,33 @@
+import {
+ Component,
+ input,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+ computed,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn } from "../../utils";
+
+/**
+ * Cursor component that matches the React implementation exactly.
+ * Shows a pulsing dot animation to indicate activity.
+ */
+@Component({
+ selector: "copilot-chat-message-view-cursor",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: ` `,
+})
+export class CopilotChatMessageViewCursor {
+ inputClass = input();
+
+ // Computed class that matches React exactly: w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1
+ computedClass = computed(() =>
+ cn(
+ "w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1",
+ this.inputClass()
+ )
+ );
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view.ts
new file mode 100644
index 0000000000..73013db069
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view.ts
@@ -0,0 +1,222 @@
+import {
+ Component,
+ input,
+ output,
+ ContentChild,
+ TemplateRef,
+ Type,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+ computed,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CopilotSlot } from "../../slots/copilot-slot";
+import type { Message } from "@ag-ui/core";
+import { CopilotChatAssistantMessage } from "./copilot-chat-assistant-message";
+import { CopilotChatUserMessage } from "./copilot-chat-user-message";
+import { CopilotChatMessageViewCursor } from "./copilot-chat-message-view-cursor";
+import { cn } from "../../utils";
+
+/**
+ * CopilotChatMessageView component - Angular port of the React component.
+ * Renders a list of chat messages with support for custom slots and layouts.
+ * DOM structure and Tailwind classes match the React implementation exactly.
+ */
+@Component({
+ selector: "copilot-chat-message-view",
+ standalone: true,
+ imports: [
+ CommonModule,
+ CopilotSlot,
+ CopilotChatAssistantMessage,
+ CopilotChatUserMessage,
+ CopilotChatMessageViewCursor,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+ @if (customLayoutTemplate) {
+ ([]);
+ showCursor = input(false);
+ isLoading = input(false);
+ inputClass = input();
+
+ // Handler availability handled via DI service
+
+ // Assistant message slot inputs
+ assistantMessageComponent = input | undefined>();
+ assistantMessageTemplate = input | undefined>();
+ assistantMessageClass = input();
+
+ // User message slot inputs
+ userMessageComponent = input | undefined>();
+ userMessageTemplate = input | undefined>();
+ userMessageClass = input();
+
+ // Cursor slot inputs
+ cursorComponent = input | undefined>();
+ cursorTemplate = input | undefined>();
+ cursorClass = input();
+
+ // Custom layout template (render prop pattern)
+ @ContentChild("customLayout") customLayoutTemplate?: TemplateRef;
+
+ // Output events (bubbled from child components)
+ assistantMessageThumbsUp = output<{ message: Message }>();
+ assistantMessageThumbsDown = output<{ message: Message }>();
+ assistantMessageReadAloud = output<{ message: Message }>();
+ assistantMessageRegenerate = output<{ message: Message }>();
+ userMessageCopy = output<{ message: Message }>();
+ userMessageEdit = output<{ message: Message }>();
+
+ // Default components for slots
+ protected readonly defaultAssistantComponent = CopilotChatAssistantMessage;
+ protected readonly defaultUserComponent = CopilotChatUserMessage;
+ protected readonly defaultCursorComponent = CopilotChatMessageViewCursor;
+
+ // Derived values from inputs
+ protected messagesValue = computed(() => this.messages());
+ protected showCursorValue = computed(() => this.showCursor());
+ protected isLoadingValue = computed(() => this.isLoading());
+
+ // Computed class matching React: twMerge("flex flex-col", className)
+ computedClass = computed(() => cn("flex flex-col", this.inputClass()));
+
+ // Layout context for custom templates (render prop pattern)
+ layoutContext = computed(() => ({
+ isLoading: this.isLoadingValue(),
+ messages: this.messagesValue(),
+ showCursor: this.showCursorValue(),
+ messageElements: this.messagesValue().filter(
+ (m) => m && (m.role === "assistant" || m.role === "user")
+ ),
+ }));
+
+ // Slot resolution computed signals
+ assistantMessageSlot = computed(
+ () => this.assistantMessageComponent() || this.assistantMessageClass()
+ );
+
+ userMessageSlot = computed(
+ () => this.userMessageComponent() || this.userMessageClass()
+ );
+
+ cursorSlot = computed(() => this.cursorComponent() || this.cursorClass());
+
+ // Props merging helpers
+ mergeAssistantProps(message: Message) {
+ return {
+ message,
+ messages: this.messagesValue(),
+ isLoading: this.isLoadingValue(),
+ inputClass: this.assistantMessageClass(),
+ };
+ }
+
+ mergeUserProps(message: Message) {
+ return {
+ message,
+ inputClass: this.userMessageClass(),
+ };
+ }
+
+ // TrackBy function for performance optimization
+ trackByMessageId(index: number, message: Message): string {
+ return message?.id || `index-${index}`;
+ }
+
+ constructor() {}
+
+ // Event handlers - just pass them through
+ handleAssistantThumbsUp(event: { message: Message }): void {
+ this.assistantMessageThumbsUp.emit(event);
+ }
+
+ handleAssistantThumbsDown(event: { message: Message }): void {
+ this.assistantMessageThumbsDown.emit(event);
+ }
+
+ handleAssistantReadAloud(event: { message: Message }): void {
+ this.assistantMessageReadAloud.emit(event);
+ }
+
+ handleAssistantRegenerate(event: { message: Message }): void {
+ this.assistantMessageRegenerate.emit(event);
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view.types.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view.types.ts
new file mode 100644
index 0000000000..c912053529
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-message-view.types.ts
@@ -0,0 +1,39 @@
+import { Message } from "@ag-ui/client";
+import { Type, TemplateRef } from "@angular/core";
+
+// Context interfaces for template slots
+export interface MessageViewContext {
+ showCursor: boolean;
+ messages: Message[];
+ messageElements: any[]; // Will be populated with rendered elements
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface CursorContext {
+ // Empty for now, can be extended if needed
+}
+
+// Component input props interface
+export interface CopilotChatMessageViewProps {
+ messages?: Message[];
+ showCursor?: boolean;
+ inputClass?: string;
+
+ // Assistant message slots
+ assistantMessageComponent?: Type;
+ assistantMessageTemplate?: TemplateRef;
+ assistantMessageClass?: string;
+
+ // User message slots
+ userMessageComponent?: Type;
+ userMessageTemplate?: TemplateRef;
+ userMessageClass?: string;
+
+ // Cursor slots
+ cursorComponent?: Type;
+ cursorTemplate?: TemplateRef;
+ cursorClass?: string;
+}
+
+// Re-export for convenience
+export type { Message };
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-textarea.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-textarea.ts
new file mode 100644
index 0000000000..9f70bdfc50
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-textarea.ts
@@ -0,0 +1,186 @@
+import {
+ Component,
+ input,
+ output,
+ ElementRef,
+ AfterViewInit,
+ signal,
+ computed,
+ inject,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { cn } from "../../utils";
+import { injectChatLabels } from "../../chat-config";
+import { injectChatState } from "../../chat-state";
+
+@Component({
+ selector: "textarea[copilotChatTextarea]",
+ standalone: true,
+ imports: [],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ "[value]": "computedValue()",
+ "[placeholder]": "placeholder()",
+ "[disabled]": "disabled()",
+ "[class]": "computedClass()",
+ "[style.max-height.px]": "maxHeight()",
+ "[style.overflow]": "'auto'",
+ "[style.resize]": "'none'",
+ "(input)": "onInput($event)",
+ "(keydown)": "onKeyDown($event)",
+ "[attr.rows]": "1",
+ },
+ template: "",
+ styles: [],
+})
+export class CopilotChatTextarea implements AfterViewInit {
+ private elementRef = inject(ElementRef);
+ get textareaRef() {
+ return this.elementRef;
+ }
+
+ inputValue = input();
+ inputPlaceholder = input();
+ inputMaxRows = input();
+ inputAutoFocus = input();
+ inputDisabled = input();
+ inputClass = input();
+
+ valueChange = output();
+ keyDown = output();
+
+ readonly chatLabels = injectChatLabels();
+ readonly chatState = injectChatState();
+
+ // Internal signals
+ maxHeight = signal(0);
+
+ // Computed values
+ computedValue = computed(
+ () => this.inputValue() ?? this.chatState.inputValue() ?? ""
+ );
+ placeholder = computed(
+ () => this.inputPlaceholder() || this.chatLabels.chatInputPlaceholder
+ );
+ disabled = computed(() => this.inputDisabled() ?? false);
+
+ computedClass = computed(() => {
+ const baseClasses = cn(
+ // Layout and sizing
+ "w-full p-5 pb-0",
+ // Behavior
+ "outline-none resize-none",
+ // Background
+ "bg-transparent",
+ // Typography
+ "antialiased font-regular leading-relaxed text-[16px]",
+ // Placeholder styles
+ "placeholder:text-[#00000077] dark:placeholder:text-[#fffc]"
+ );
+ return cn(baseClasses, this.inputClass());
+ });
+
+ constructor() {}
+
+ ngAfterViewInit(): void {
+ this.calculateMaxHeight();
+ this.adjustHeight();
+
+ if (this.inputAutoFocus() ?? true) {
+ setTimeout(() => {
+ this.elementRef.nativeElement.focus();
+ });
+ }
+ }
+
+ onInput(event: Event): void {
+ const textarea = event.target as HTMLTextAreaElement;
+ const newValue = textarea.value;
+ this.valueChange.emit(newValue);
+
+ this.chatState.changeInput(newValue);
+
+ this.adjustHeight();
+ }
+
+ onKeyDown(event: KeyboardEvent): void {
+ // Check for Enter key without Shift
+ if (event.key === "Enter" && !event.shiftKey) {
+ event.preventDefault();
+ this.keyDown.emit(event);
+ } else {
+ this.keyDown.emit(event);
+ }
+ }
+
+ private calculateMaxHeight(): void {
+ const textarea = this.elementRef.nativeElement;
+ const maxRowsValue = this.inputMaxRows() ?? 5;
+
+ // Save current value
+ const currentValue = textarea.value;
+
+ // Clear content to measure single row height
+ textarea.value = "";
+ textarea.style.height = "auto";
+
+ // Get computed styles to account for padding
+ const computedStyle = window.getComputedStyle(textarea);
+ const paddingTop = parseFloat(computedStyle.paddingTop);
+ const paddingBottom = parseFloat(computedStyle.paddingBottom);
+
+ // Calculate actual content height (without padding)
+ const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
+
+ // Calculate max height: content height for maxRows + padding
+ const calculatedMaxHeight =
+ contentHeight * maxRowsValue + paddingTop + paddingBottom;
+ this.maxHeight.set(calculatedMaxHeight);
+
+ // Restore original value
+ textarea.value = currentValue;
+
+ // Adjust height after calculating maxHeight
+ if (currentValue) {
+ this.adjustHeight();
+ }
+ }
+
+ private adjustHeight(): void {
+ const textarea = this.elementRef.nativeElement;
+ const maxHeightValue = this.maxHeight();
+
+ if (maxHeightValue > 0) {
+ textarea.style.height = "auto";
+ textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeightValue)}px`;
+ }
+ }
+
+ /**
+ * Public method to focus the textarea
+ */
+ focus(): void {
+ this.elementRef.nativeElement.focus();
+ }
+
+ /**
+ * Public method to get current value
+ */
+ getValue(): string {
+ return this.elementRef.nativeElement.value;
+ }
+
+ /**
+ * Public method to set value programmatically
+ */
+ setValue(value: string): void {
+ this.elementRef.nativeElement.value = value;
+ this.valueChange.emit(value);
+
+ this.chatState.changeInput(value);
+
+ setTimeout(() => this.adjustHeight());
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-tool-calls-view.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-tool-calls-view.ts
new file mode 100644
index 0000000000..080ecca720
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-tool-calls-view.ts
@@ -0,0 +1,24 @@
+import { Component, ChangeDetectionStrategy, input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import type { AssistantMessage, Message } from "@ag-ui/core";
+import { RenderToolCalls } from "../../render-tool-calls";
+
+@Component({
+ standalone: true,
+ selector: "copilot-chat-tool-calls-view",
+ imports: [CommonModule, RenderToolCalls],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+
+
+ `,
+})
+export class CopilotChatToolCallsView {
+ readonly message = input.required();
+ readonly messages = input.required();
+ readonly isLoading = input(false);
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-toolbar.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-toolbar.ts
new file mode 100644
index 0000000000..5756f74145
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-toolbar.ts
@@ -0,0 +1,31 @@
+import {
+ Component,
+ input,
+ computed,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn } from "../../utils";
+
+@Component({
+ selector: "div[copilotChatToolbar]",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ "[class]": "computedClass()",
+ },
+ template: `();
+
+ readonly computedClass = computed(() => {
+ const baseClasses =
+ "w-full h-[60px] bg-transparent flex items-center justify-between";
+ return cn(baseClasses, this.inputClass());
+ });
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-tools-menu.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-tools-menu.ts
new file mode 100644
index 0000000000..d84969bbf0
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-tools-menu.ts
@@ -0,0 +1,184 @@
+import {
+ Component,
+ input,
+ computed,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CdkMenuModule } from "@angular/cdk/menu";
+import { OverlayModule } from "@angular/cdk/overlay";
+import { LucideAngularModule, Settings2, ChevronRight } from "lucide-angular";
+import type { ToolsMenuItem } from "./copilot-chat-input.types";
+import { cn } from "../../utils";
+import { injectChatLabels } from "../../chat-config";
+
+@Component({
+ selector: "copilot-chat-tools-menu",
+ standalone: true,
+ imports: [CommonModule, CdkMenuModule, OverlayModule, LucideAngularModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+ @if (hasItems()) {
+
+
+
+
+ }
+ `,
+ styles: [
+ `
+ /* CDK Overlay styles for positioning */
+ .cdk-overlay-pane {
+ position: absolute;
+ pointer-events: auto;
+ z-index: 1000;
+ }
+
+ /* Ensure menu appears above other content */
+ .cdk-overlay-container {
+ position: fixed;
+ z-index: 1000;
+ }
+
+ /* Menu animation */
+ [cdkMenu] {
+ animation: menuFadeIn 0.15s ease-out;
+ }
+
+ @keyframes menuFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+ `,
+ ],
+})
+export class CopilotChatToolsMenu {
+ readonly Settings2Icon = Settings2;
+ readonly ChevronRightIcon = ChevronRight;
+ inputToolsMenu = input<(ToolsMenuItem | "-")[] | undefined>();
+ inputDisabled = input();
+ inputClass = input();
+
+ private labels = injectChatLabels();
+
+ // Derive state from inputs
+ toolsMenu = computed(() => this.inputToolsMenu() ?? []);
+ disabled = computed(() => this.inputDisabled() ?? false);
+ customClass = computed(() => this.inputClass());
+
+ hasItems = computed(() => this.toolsMenu().length > 0);
+
+ readonly label = this.labels.chatInputToolbarToolsButtonLabel;
+
+ buttonClass = computed(() => {
+ const baseClasses = cn(
+ // Base button styles
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium",
+ "transition-all disabled:pointer-events-none disabled:opacity-50",
+ "shrink-0 outline-none",
+ "focus-visible:ring-[3px]",
+ // chatInputToolbarSecondary variant
+ "cursor-pointer",
+ "bg-transparent text-[#444444]",
+ "dark:text-white dark:border-[#404040]",
+ "transition-colors",
+ "focus:outline-none",
+ "hover:bg-[#f8f8f8] hover:text-[#333333]",
+ "dark:hover:bg-[#404040] dark:hover:text-[#FFFFFF]",
+ "disabled:cursor-not-allowed disabled:opacity-50",
+ "disabled:hover:bg-transparent disabled:hover:text-[#444444]",
+ "dark:disabled:hover:bg-transparent dark:disabled:hover:text-[#CCCCCC]",
+ // Size
+ "h-9 px-3 gap-2 font-normal"
+ );
+ return cn(baseClasses, this.customClass());
+ });
+
+ isMenuItem(item: any): item is ToolsMenuItem {
+ return item && typeof item === "object" && "label" in item;
+ }
+
+ handleItemClick(item: ToolsMenuItem): void {
+ if (item.action) {
+ item.action();
+ }
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-branch-navigation.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-branch-navigation.ts
new file mode 100644
index 0000000000..9bf5e5832c
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-branch-navigation.ts
@@ -0,0 +1,88 @@
+import { Component, input, output, ChangeDetectionStrategy, ViewEncapsulation, computed } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { LucideAngularModule, ChevronLeft, ChevronRight } from "lucide-angular";
+import { type CopilotChatUserMessageOnSwitchToBranchProps } from "./copilot-chat-user-message.types";
+import { cn } from "../../utils";
+import { UserMessage } from "@ag-ui/core";
+
+@Component({
+ standalone: true,
+ selector: "copilot-chat-user-message-branch-navigation",
+ imports: [CommonModule, LucideAngularModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+ @if (showNavigation()) {
+ (0);
+ numberOfBranches = input(1);
+ message = input();
+ inputClass = input();
+ switchToBranch = output();
+
+ readonly ChevronLeftIcon = ChevronLeft;
+ readonly ChevronRightIcon = ChevronRight;
+
+ readonly buttonClass = cn(
+ // Flex centering
+ "inline-flex items-center justify-center",
+ // Cursor
+ "cursor-pointer",
+ // Background and text
+ "p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]",
+ // Dark mode
+ "dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]",
+ // Shape and sizing
+ "h-6 w-6 rounded-md",
+ // Interactions
+ "transition-colors",
+ // Disabled state
+ "disabled:opacity-50 disabled:cursor-not-allowed",
+ );
+
+ showNavigation = computed(() => this.numberOfBranches() > 1);
+
+ canGoPrev = computed(() => this.currentBranch() > 0);
+
+ canGoNext = computed(() => this.currentBranch() < this.numberOfBranches() - 1);
+
+ computedClass = computed(() => {
+ return cn("flex items-center gap-1", this.inputClass());
+ });
+
+ handlePrevious(): void {
+ if (this.canGoPrev()) {
+ const newIndex = this.currentBranch() - 1;
+ this.switchToBranch.emit({
+ branchIndex: newIndex,
+ numberOfBranches: this.numberOfBranches(),
+ message: this.message()!,
+ });
+ }
+ }
+
+ handleNext(): void {
+ if (this.canGoNext()) {
+ const newIndex = this.currentBranch() + 1;
+ this.switchToBranch.emit({
+ branchIndex: newIndex,
+ numberOfBranches: this.numberOfBranches(),
+ message: this.message()!,
+ });
+ }
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-buttons.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-buttons.ts
new file mode 100644
index 0000000000..d70d4a5f11
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-buttons.ts
@@ -0,0 +1,161 @@
+import {
+ Component,
+ input,
+ output,
+ signal,
+ computed,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { LucideAngularModule, Copy, Check, Edit } from "lucide-angular";
+import { CopilotTooltip } from "../../directives/tooltip";
+import { cn } from "../../utils";
+import { injectChatLabels } from "../../chat-config";
+
+// Base toolbar button component
+@Component({
+ selector: "button[copilotChatUserMessageToolbarButton]",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: ` ("");
+ disabled = input(false);
+ inputClass = input();
+
+ computedClass = computed(() => {
+ return cn(
+ // Flex centering
+ "inline-flex items-center justify-center",
+ // Cursor
+ "cursor-pointer",
+ // Background and text
+ "p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]",
+ // Dark mode
+ "dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]",
+ // Shape and sizing
+ "h-8 w-8 rounded-md",
+ // Interactions
+ "transition-colors",
+ // Hover states
+ "hover:text-[rgb(93,93,93)]",
+ "dark:hover:text-[rgb(243,243,243)]",
+ // Focus states
+ "focus:outline-none focus:ring-2 focus:ring-offset-2",
+ // Disabled state
+ "disabled:opacity-50 disabled:cursor-not-allowed",
+ this.inputClass()
+ );
+ });
+}
+
+// Copy button component
+@Component({
+ standalone: true,
+ selector: "copilot-chat-user-message-copy-button",
+ imports: [
+ CommonModule,
+ LucideAngularModule,
+ CopilotChatUserMessageToolbarButton,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+ `,
+})
+export class CopilotChatUserMessageCopyButton {
+ readonly title = input();
+ readonly disabled = input(false);
+ readonly inputClass = input();
+ readonly content = input();
+ readonly clicked = output();
+ readonly CopyIcon = Copy;
+ readonly CheckIcon = Check;
+ readonly copied = signal(false);
+ readonly labels = injectChatLabels();
+
+ handleCopy(): void {
+ if (!this.content()) return;
+
+ // Set copied immediately for instant feedback
+ this.copied.set(true);
+ setTimeout(() => this.copied.set(false), 2000);
+
+ // Copy to clipboard (fire and forget)
+ navigator.clipboard.writeText(this.content()!).then(
+ () => this.clicked.emit(),
+ (err) => {
+ console.error("Failed to copy message:", err);
+ this.copied.set(false);
+ }
+ );
+ }
+}
+
+// Edit button component
+@Component({
+ selector: "copilot-chat-user-message-edit-button",
+ standalone: true,
+ imports: [
+ CommonModule,
+ LucideAngularModule,
+ CopilotChatUserMessageToolbarButton,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+ `,
+})
+export class CopilotChatUserMessageEditButton {
+ title = input();
+ disabled = input(false);
+ inputClass = input();
+ clicked = output();
+
+ readonly EditIcon = Edit;
+ readonly labels = injectChatLabels();
+
+ handleEdit(): void {
+ if (!this.disabled()) {
+ this.clicked.emit();
+ }
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-renderer.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-renderer.ts
new file mode 100644
index 0000000000..aac08b4be6
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-renderer.ts
@@ -0,0 +1,32 @@
+import {
+ Component,
+ input,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+ computed,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn } from "../../utils";
+
+@Component({
+ selector: "copilot-chat-user-message-renderer",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: {
+ "[class]": "computedClass()",
+ },
+ template: `{{ content() }}`,
+})
+export class CopilotChatUserMessageRenderer {
+ readonly content = input("");
+ readonly inputClass = input();
+
+ readonly computedClass = computed(() => {
+ return cn(
+ "prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
+ this.inputClass()
+ );
+ });
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-toolbar.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-toolbar.ts
new file mode 100644
index 0000000000..cbaadb15d8
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message-toolbar.ts
@@ -0,0 +1,31 @@
+import {
+ Component,
+ input,
+ computed,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn } from "../../utils";
+
+@Component({
+ selector: "div[copilotChatUserMessageToolbar]",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: ` ();
+
+ readonly computedClass = computed(() =>
+ cn(
+ "w-full bg-transparent flex items-center justify-end mt-[4px] invisible group-hover:visible",
+ this.inputClass()
+ )
+ );
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message.ts
new file mode 100644
index 0000000000..eaad605ef2
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message.ts
@@ -0,0 +1,261 @@
+import {
+ Component,
+ input,
+ output,
+ TemplateRef,
+ ContentChild,
+ computed,
+ Type,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CopilotSlot } from "../../slots/copilot-slot";
+import {
+ type CopilotChatUserMessageOnEditMessageProps,
+ type CopilotChatUserMessageOnSwitchToBranchProps,
+ type MessageRendererContext,
+ type CopyButtonContext,
+ type EditButtonContext,
+ type BranchNavigationContext,
+ type UserMessageToolbarContext,
+} from "./copilot-chat-user-message.types";
+import { CopilotChatUserMessageRenderer } from "./copilot-chat-user-message-renderer";
+import {
+ CopilotChatUserMessageCopyButton,
+ CopilotChatUserMessageEditButton,
+} from "./copilot-chat-user-message-buttons";
+import { CopilotChatUserMessageToolbar } from "./copilot-chat-user-message-toolbar";
+import { CopilotChatUserMessageBranchNavigation } from "./copilot-chat-user-message-branch-navigation";
+import { cn } from "../../utils";
+import { UserMessage } from "@ag-ui/core";
+
+function flattenUserMessageContent(content?: UserMessage["content"]): string {
+ if (!content) {
+ return "";
+ }
+
+ if (typeof content === "string") {
+ return content;
+ }
+
+ return content
+ .map((part) => {
+ if (
+ part &&
+ typeof part === "object" &&
+ "type" in part &&
+ (part as { type?: unknown }).type === "text" &&
+ typeof (part as { text?: unknown }).text === "string"
+ ) {
+ return (part as { text: string }).text;
+ }
+ return "";
+ })
+ .filter((text) => text.length > 0)
+ .join("\n");
+}
+
+@Component({
+ standalone: true,
+ selector: "copilot-chat-user-message",
+ imports: [
+ CommonModule,
+ CopilotSlot,
+ CopilotChatUserMessageRenderer,
+ CopilotChatUserMessageCopyButton,
+ CopilotChatUserMessageEditButton,
+ CopilotChatUserMessageToolbar,
+ CopilotChatUserMessageBranchNavigation,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+ ;
+ @ContentChild("toolbar", { read: TemplateRef })
+ toolbarTemplate?: TemplateRef;
+ @ContentChild("copyButton", { read: TemplateRef })
+ copyButtonTemplate?: TemplateRef;
+ @ContentChild("editButton", { read: TemplateRef })
+ editButtonTemplate?: TemplateRef;
+ @ContentChild("branchNavigation", { read: TemplateRef })
+ branchNavigationTemplate?: TemplateRef;
+
+ // Props for tweaking default components
+ messageRendererClass = input();
+ toolbarClass = input();
+ copyButtonClass = input();
+ editButtonClass = input();
+ branchNavigationClass = input();
+
+ // Component inputs for overrides
+ messageRendererComponent = input | undefined>();
+ toolbarComponent = input | undefined>();
+ copyButtonComponent = input | undefined>();
+ editButtonComponent = input | undefined>();
+ branchNavigationComponent = input | undefined>();
+
+ // Regular inputs
+ message = input();
+ branchIndex = input();
+ numberOfBranches = input();
+ additionalToolbarItems = input | undefined>();
+ inputClass = input();
+
+ // Output events
+ editMessage = output();
+ switchToBranch = output();
+
+ // Derived values
+ branchIndexValue = computed(() => this.branchIndex() ?? 0);
+ numberOfBranchesValue = computed(() => this.numberOfBranches() ?? 1);
+
+ // Default components
+ CopilotChatUserMessageRenderer = CopilotChatUserMessageRenderer;
+ CopilotChatUserMessageToolbar = CopilotChatUserMessageToolbar;
+ CopilotChatUserMessageCopyButton = CopilotChatUserMessageCopyButton;
+ CopilotChatUserMessageEditButton = CopilotChatUserMessageEditButton;
+ CopilotChatUserMessageBranchNavigation = CopilotChatUserMessageBranchNavigation;
+
+ // Computed values
+ showBranchNavigation = computed(() => (this.numberOfBranches() ?? 1) > 1);
+
+ computedClass = computed(() => cn("flex flex-col items-end group pt-10", this.inputClass()));
+
+ // Context for slots (reactive via signals)
+ flattenedContent = computed(() => flattenUserMessageContent(this.message()?.content));
+
+ messageRendererContext = computed(() => ({
+ content: this.flattenedContent(),
+ }));
+
+ // Output maps for slots
+ copyButtonOutputs = { clicked: () => this.handleCopy() };
+ editButtonOutputs = { clicked: () => this.handleEdit() };
+
+ branchNavigationContext = computed(() => ({
+ currentBranch: this.branchIndexValue(),
+ numberOfBranches: this.numberOfBranchesValue(),
+ onSwitchToBranch: (props) => this.handleSwitchToBranch(props),
+ message: this.message()!,
+ }));
+
+ toolbarContext = computed(() => ({
+ children: null, // Will be populated by the toolbar content
+ }));
+
+ handleCopy(): void {
+ // Copy is handled by the button component itself
+ // This is just for any additional logic if needed
+ }
+
+ handleEdit(): void {
+ this.editMessage.emit({ message: this.message()! });
+ }
+
+ handleSwitchToBranch(props: CopilotChatUserMessageOnSwitchToBranchProps): void {
+ this.switchToBranch.emit(props);
+ }
+ constructor() {}
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message.types.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message.types.ts
new file mode 100644
index 0000000000..a733e1f237
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-user-message.types.ts
@@ -0,0 +1,36 @@
+import type { UserMessage } from "@ag-ui/core";
+
+export interface CopilotChatUserMessageOnEditMessageProps {
+ message: UserMessage;
+}
+
+export interface CopilotChatUserMessageOnSwitchToBranchProps {
+ message: UserMessage;
+ branchIndex: number;
+ numberOfBranches: number;
+}
+
+// Context interfaces for slots
+export interface MessageRendererContext {
+ content: string;
+}
+
+export interface CopyButtonContext {
+ content?: string;
+ copied?: boolean;
+}
+
+export interface EditButtonContext {
+ // Empty context - click handled via outputs map
+}
+
+export interface BranchNavigationContext {
+ currentBranch: number;
+ numberOfBranches: number;
+ onSwitchToBranch?: (props: CopilotChatUserMessageOnSwitchToBranchProps) => void;
+ message: UserMessage;
+}
+
+export interface UserMessageToolbarContext {
+ children?: any;
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-disclaimer.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-disclaimer.ts
new file mode 100644
index 0000000000..3455fbbe2a
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-disclaimer.ts
@@ -0,0 +1,50 @@
+import {
+ Component,
+ input,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn } from "../..//utils";
+import { injectChatLabels } from "../../chat-config";
+
+/**
+ * Disclaimer component for CopilotChatView
+ * Shows configurable disclaimer text below the input
+ * Integrates with CopilotChatConfigurationService for labels
+ */
+@Component({
+ selector: "copilot-chat-view-disclaimer",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+ ();
+ text = input();
+
+ readonly labels = injectChatLabels();
+
+ // Get disclaimer text from input or configuration
+ get disclaimerText(): string {
+ if (this.text()) {
+ return this.text() as string;
+ }
+
+ return this.labels.chatDisclaimerText;
+ }
+
+ // Computed class matching React exactly
+ get computedClass(): string {
+ return cn(
+ "text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto",
+ this.inputClass()
+ );
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-feather.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-feather.ts
new file mode 100644
index 0000000000..af2f3ba3cf
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-feather.ts
@@ -0,0 +1,42 @@
+import {
+ Component,
+ input,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { cn } from "../../utils";
+
+/**
+ * Feather component for CopilotChatView
+ * Creates a gradient overlay effect between messages and input
+ * Matches React implementation exactly with same Tailwind classes
+ */
+@Component({
+ selector: "copilot-chat-view-feather",
+ standalone: true,
+ imports: [CommonModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: ` `,
+})
+export class CopilotChatViewFeather {
+ inputClass = input();
+ style = input<{ [key: string]: any } | undefined>();
+
+ // Computed class matching React exactly
+ get computedClass(): string {
+ return cn(
+ // Positioning
+ "absolute bottom-0 left-0 right-4 h-24 pointer-events-none z-10",
+ // Gradient
+ "bg-gradient-to-t",
+ // Light mode colors
+ "from-white via-white to-transparent",
+ // Dark mode colors
+ "dark:from-[rgb(33,33,33)] dark:via-[rgb(33,33,33)]",
+ // Custom classes
+ this.inputClass()
+ );
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-handlers.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-handlers.ts
new file mode 100644
index 0000000000..5c5340d13a
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-handlers.ts
@@ -0,0 +1,14 @@
+import { Injectable, signal } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class CopilotChatViewHandlers {
+ // Assistant message handler availability
+ hasAssistantThumbsUpHandler = signal(false);
+ hasAssistantThumbsDownHandler = signal(false);
+ hasAssistantReadAloudHandler = signal(false);
+ hasAssistantRegenerateHandler = signal(false);
+
+ // User message handler availability
+ hasUserCopyHandler = signal(false);
+ hasUserEditHandler = signal(false);
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-input-container.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-input-container.ts
new file mode 100644
index 0000000000..3b6f2f4400
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-input-container.ts
@@ -0,0 +1,80 @@
+import {
+ Component,
+ input,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+ forwardRef,
+ ElementRef,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CopilotSlot } from "../../slots/copilot-slot";
+import { CopilotChatInput } from "./copilot-chat-input";
+import { CopilotChatViewDisclaimer } from "./copilot-chat-view-disclaimer";
+import { cn } from "../../utils";
+
+/**
+ * InputContainer component for CopilotChatView
+ * Container for input and disclaimer components
+ * Uses ForwardRef for DOM access
+ */
+@Component({
+ standalone: true,
+ selector: "copilot-chat-view-input-container",
+ imports: [CommonModule, CopilotSlot],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ providers: [
+ {
+ provide: ElementRef,
+ useExisting: forwardRef(() => CopilotChatViewInputContainer),
+ },
+ ],
+ template: `
+ ();
+
+ // Input slot configuration
+ input = input();
+ inputClass = input();
+
+ // Disclaimer slot configuration
+ disclaimer = input();
+ disclaimerText = input();
+ disclaimerClass = input();
+
+ // Default components
+ protected readonly defaultInputComponent = CopilotChatInput;
+ protected readonly defaultDisclaimerComponent = CopilotChatViewDisclaimer;
+
+ constructor(elementRef: ElementRef) {
+ super(elementRef.nativeElement);
+ }
+
+ get computedClass(): string {
+ return cn(
+ "absolute bottom-0 left-0 right-0 z-20",
+ this.inputContainerClass()
+ );
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-to-bottom-button.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-to-bottom-button.ts
new file mode 100644
index 0000000000..facd5a307a
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-to-bottom-button.ts
@@ -0,0 +1,80 @@
+import {
+ Component,
+ input,
+ output,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { LucideAngularModule, ChevronDown } from "lucide-angular";
+import { cn } from "../../utils";
+
+/**
+ * ScrollToBottomButton component for CopilotChatView
+ * Matches React implementation exactly with same Tailwind classes
+ */
+@Component({
+ standalone: true,
+ selector: "copilot-chat-view-scroll-to-bottom-button",
+ imports: [CommonModule, LucideAngularModule],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ template: `
+
+ `,
+})
+export class CopilotChatViewScrollToBottomButton {
+ inputClass = input();
+ disabled = input(false);
+ // Support function-style click handler via slot context
+ onClick = input<(() => void) | undefined>();
+
+ // Simple, idiomatic Angular output
+ clicked = output();
+
+ // Icon reference
+ protected readonly ChevronDown = ChevronDown;
+
+ // Computed class matching React exactly
+ get computedClass(): string {
+ return cn(
+ // Base button styles
+ "rounded-full w-10 h-10 p-0",
+ // Background colors
+ "bg-white dark:bg-gray-900",
+ // Border and shadow
+ "shadow-lg border border-gray-200 dark:border-gray-700",
+ // Hover states
+ "hover:bg-gray-50 dark:hover:bg-gray-800",
+ // Layout
+ "flex items-center justify-center cursor-pointer",
+ // Transition
+ "transition-colors",
+ // Focus states
+ "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+ // Custom classes
+ this.inputClass()
+ );
+ }
+
+ handleClick(): void {
+ if (!this.disabled()) {
+ // Call input handler if provided (slot-style)
+ if (this.onClick()) {
+ this.onClick()!();
+ }
+ this.clicked.emit();
+ }
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-view.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-view.ts
new file mode 100644
index 0000000000..a3c750073e
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view-scroll-view.ts
@@ -0,0 +1,343 @@
+import {
+ Component,
+ input,
+ output,
+ ViewChild,
+ ElementRef,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+ signal,
+ computed,
+ OnInit,
+ AfterViewInit,
+ OnDestroy,
+ inject,
+ PLATFORM_ID,
+ ChangeDetectorRef,
+} from "@angular/core";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import { ScrollingModule } from "@angular/cdk/scrolling";
+import { CopilotSlot } from "../../slots/copilot-slot";
+import { CopilotChatMessageView } from "./copilot-chat-message-view";
+import { CopilotChatViewScrollToBottomButton } from "./copilot-chat-view-scroll-to-bottom-button";
+import { StickToBottom } from "../../directives/stick-to-bottom";
+import { ScrollPosition } from "../../scroll-position";
+import { Message } from "@ag-ui/client";
+import { cn } from "../../utils";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+
+/**
+ * ScrollView component for CopilotChatView
+ * Handles auto-scrolling and scroll position management
+ */
+@Component({
+ standalone: true,
+ selector: "copilot-chat-view-scroll-view",
+ imports: [
+ CommonModule,
+ ScrollingModule,
+ CopilotSlot,
+ CopilotChatMessageView,
+ StickToBottom,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ providers: [ScrollPosition],
+ template: `
+ @if (!hasMounted()) {
+
+ (true);
+
+ inputContainerHeight = input(0);
+
+ isResizing = input(false);
+ inputClass = input();
+ messages = input([]);
+ messageView = input();
+ messageViewClass = input();
+ showCursor = input(false);
+
+ // Handler availability flags removed in favor of DI service
+
+ // Slot inputs
+ scrollToBottomButton = input();
+ scrollToBottomButtonClass = input();
+
+ // Output events (bubbled from message view)
+ assistantMessageThumbsUp = output<{ message: Message }>();
+ assistantMessageThumbsDown = output<{ message: Message }>();
+ assistantMessageReadAloud = output<{ message: Message }>();
+ assistantMessageRegenerate = output<{ message: Message }>();
+ userMessageCopy = output<{ message: Message }>();
+ userMessageEdit = output<{ message: Message }>();
+
+ // ViewChild references
+ @ViewChild("scrollContainer", { read: ElementRef })
+ scrollContainer?: ElementRef;
+ @ViewChild("contentContainer", { read: ElementRef })
+ contentContainer?: ElementRef;
+ @ViewChild(StickToBottom) stickToBottomDirective?: StickToBottom;
+
+ // Default components
+ protected readonly defaultMessageViewComponent = CopilotChatMessageView;
+ protected readonly defaultScrollToBottomButtonComponent =
+ CopilotChatViewScrollToBottomButton;
+
+ // Signals
+ protected hasMounted = signal(false);
+ protected showScrollButton = signal(false);
+ protected isAtBottom = signal(true);
+ protected paddingBottom = computed(() => this.inputContainerHeight() + 32);
+
+ // Computed class
+ protected computedClass = computed(() => cn(this.inputClass()));
+
+ private destroy$ = new Subject();
+ private platformId = inject(PLATFORM_ID);
+ private scrollPositionService = inject(ScrollPosition);
+
+ // No mirroring of inputs; derive directly via computed()
+
+ ngOnInit(): void {
+ // Check if we're in the browser
+ if (isPlatformBrowser(this.platformId)) {
+ // Set mounted after a tick to allow for hydration
+ setTimeout(() => {
+ this.hasMounted.set(true);
+ }, 0);
+ }
+ }
+
+ ngAfterViewInit(): void {
+ if (!this.autoScroll()) {
+ // Wait for the view to be fully rendered after hasMounted is set
+ setTimeout(() => {
+ if (this.scrollContainer) {
+ // Check initial scroll position
+ const initialState = this.scrollPositionService.getScrollState(
+ this.scrollContainer.nativeElement,
+ 10
+ );
+ this.showScrollButton.set(!initialState.isAtBottom);
+
+ // Monitor scroll position for manual mode
+ this.scrollPositionService
+ .monitorScrollPosition(this.scrollContainer, 10)
+ .pipe(takeUntil(this.destroy$))
+ .subscribe((state) => {
+ this.showScrollButton.set(!state.isAtBottom);
+ });
+ }
+ }, 100);
+ }
+ }
+
+ /**
+ * Handle isAtBottom change from StickToBottom directive
+ */
+ onIsAtBottomChange(isAtBottom: boolean): void {
+ this.isAtBottom.set(isAtBottom);
+ }
+
+ /**
+ * Scroll to bottom for manual mode
+ */
+ scrollToBottom(): void {
+ if (this.scrollContainer) {
+ this.scrollPositionService.scrollToBottom(this.scrollContainer, true);
+ }
+ }
+
+ /**
+ * Scroll to bottom for stick-to-bottom mode
+ */
+ scrollToBottomFromStick(): void {
+ if (this.stickToBottomDirective) {
+ this.stickToBottomDirective.scrollToBottom("smooth");
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ // Output maps for slots
+ scrollToBottomOutputs = { clicked: () => this.scrollToBottom() };
+ scrollToBottomFromStickOutputs = {
+ clicked: () => this.scrollToBottomFromStick(),
+ };
+
+ // Context methods for templates
+ messageViewContext(): any {
+ return {
+ messages: this.messages(),
+ inputClass: this.messageViewClass(),
+ showCursor: this.showCursor(),
+ };
+ }
+
+ scrollToBottomContext(): any {
+ return {
+ inputClass: this.scrollToBottomButtonClass(),
+ onClick: () => this.scrollToBottom(),
+ };
+ }
+
+ scrollToBottomFromStickContext(): any {
+ return {
+ inputClass: this.scrollToBottomButtonClass(),
+ onClick: () => this.scrollToBottomFromStick(),
+ };
+ }
+}
diff --git a/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view.ts b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view.ts
new file mode 100644
index 0000000000..c5670423b8
--- /dev/null
+++ b/src/v2.x/packages/angular/src/lib/components/chat/copilot-chat-view.ts
@@ -0,0 +1,409 @@
+import {
+ Component,
+ ContentChild,
+ TemplateRef,
+ Type,
+ ViewChild,
+ ElementRef,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ ViewEncapsulation,
+ computed,
+ signal,
+ OnInit,
+ OnChanges,
+ OnDestroy,
+ AfterViewInit,
+ input,
+ output,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CopilotSlot } from "../../slots/copilot-slot";
+import { CopilotChatViewScrollView } from "./copilot-chat-view-scroll-view";
+import { CopilotChatViewScrollToBottomButton } from "./copilot-chat-view-scroll-to-bottom-button";
+import { CopilotChatViewFeather } from "./copilot-chat-view-feather";
+import { CopilotChatViewInputContainer } from "./copilot-chat-view-input-container";
+import { CopilotChatViewDisclaimer } from "./copilot-chat-view-disclaimer";
+import { Message } from "@ag-ui/client";
+import { cn } from "../../utils";
+import { ResizeObserverService } from "../../resize-observer";
+import { CopilotChatViewHandlers } from "./copilot-chat-view-handlers";
+import { Subject } from "rxjs";
+import { takeUntil } from "rxjs/operators";
+
+/**
+ * CopilotChatView component - Angular port of the React component.
+ * A complete chat interface with message feed and input components.
+ *
+ * @example
+ * ```html
+ *
+ *
+ * ```
+ */
+@Component({
+ standalone: true,
+ selector: "copilot-chat-view",
+ imports: [CommonModule, CopilotSlot, CopilotChatViewScrollView],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ providers: [ResizeObserverService, CopilotChatViewHandlers],
+ template: `
+
+ @if (customLayoutTemplate) {
+ ([]);
+ autoScroll = input(true);
+ showCursor = input(false);
+
+ // MessageView slot inputs
+ messageViewComponent = input | undefined>(undefined);
+ messageViewTemplate = input | undefined>(undefined);
+ messageViewClass = input(undefined);
+
+ // ScrollView slot inputs
+ scrollViewComponent = input | undefined>(undefined);
+ scrollViewTemplate = input | undefined>(undefined);
+ scrollViewClass = input(undefined);
+
+ // ScrollToBottomButton slot inputs
+ scrollToBottomButtonComponent = input | undefined>(undefined);
+ scrollToBottomButtonTemplate = input | undefined>(undefined);
+ scrollToBottomButtonClass = input(undefined);
+
+ // Input slot inputs
+ inputComponent = input | undefined>(undefined);
+ inputTemplate = input | undefined>(undefined);
+
+ // InputContainer slot inputs
+ inputContainerComponent = input | undefined>(undefined);
+ inputContainerTemplate = input | undefined>(undefined);
+ inputContainerClass = input(undefined);
+
+ // Feather slot inputs
+ featherComponent = input | undefined>(undefined);
+ featherTemplate = input | undefined>(undefined);
+ featherClass = input(undefined);
+
+ // Disclaimer slot inputs
+ disclaimerComponent = input | undefined>(undefined);
+ disclaimerTemplate = input | undefined>(undefined);
+ disclaimerClass = input(undefined);
+ disclaimerText = input(undefined);
+
+ // Custom layout template (render prop pattern)
+ @ContentChild("customLayout") customLayoutTemplate?: TemplateRef;
+
+ // Named template slots for deep customization
+ @ContentChild("sendButton") sendButtonTemplate?: TemplateRef;
+ @ContentChild("toolbar") toolbarTemplate?: TemplateRef;
+ @ContentChild("textArea") textAreaTemplate?: TemplateRef;
+ @ContentChild("audioRecorder") audioRecorderTemplate?: TemplateRef;
+ @ContentChild("assistantMessageMarkdownRenderer")
+ assistantMessageMarkdownRendererTemplate?: TemplateRef;
+ @ContentChild("thumbsUpButton") thumbsUpButtonTemplate?: TemplateRef;
+ @ContentChild("thumbsDownButton") thumbsDownButtonTemplate?: TemplateRef;
+ @ContentChild("readAloudButton") readAloudButtonTemplate?: TemplateRef;
+ @ContentChild("regenerateButton") regenerateButtonTemplate?: TemplateRef;
+
+ // Output events for assistant message actions (bubbled from child components)
+ assistantMessageThumbsUp = output<{ message: Message }>();
+ assistantMessageThumbsDown = output<{ message: Message }>();
+ assistantMessageReadAloud = output<{ message: Message }>();
+ assistantMessageRegenerate = output<{ message: Message }>();
+
+ // Output events for user message actions (if applicable)
+ userMessageCopy = output<{ message: Message }>();
+ userMessageEdit = output<{ message: Message }>();
+
+ // ViewChild references
+ @ViewChild("inputContainerSlotRef", { read: ElementRef })
+ inputContainerSlotRef?: ElementRef;
+
+ // Default components for slots
+ protected readonly defaultScrollViewComponent = CopilotChatViewScrollView;
+ protected readonly defaultScrollToBottomButtonComponent =
+ CopilotChatViewScrollToBottomButton;
+ protected readonly defaultInputContainerComponent =
+ CopilotChatViewInputContainer;
+ protected readonly defaultFeatherComponent = CopilotChatViewFeather;
+ protected readonly defaultDisclaimerComponent = CopilotChatViewDisclaimer;
+
+ // Signals for reactive state
+ protected messagesValue = computed(() => this.messages());
+ protected autoScrollSignal = computed(() => this.autoScroll());
+ protected showCursorSignal = computed(() => this.showCursor());
+ protected disclaimerTextSignal = computed(() => this.disclaimerText());
+ protected disclaimerClassSignal = computed(() => this.disclaimerClass());
+ protected inputContainerHeight = signal
\n
+
+ } @else {
+
+ `,
+ styles: [
+ `
+ :host {
+ display: block;
+ width: 100%;
+ }
+ .shadow-\\[0_4px_4px_0_\\#0000000a\\2c_0_0_1px_0_\\#0000009e\\] {
+ box-shadow:
+ 0 4px 4px 0 #0000000a,
+ 0 0 1px 0 #0000009e !important;
+ }
+ `,
+ ],
+})
+export class CopilotChatInput implements AfterViewInit, OnDestroy {
+ @ViewChild(CopilotChatTextarea, { read: CopilotChatTextarea })
+ textAreaRef?: CopilotChatTextarea;
+
+ @ViewChild(CopilotChatAudioRecorder)
+ audioRecorderRef?: CopilotChatAudioRecorder;
+
+ // Capture templates from content projection
+ @ContentChild("sendButton", { read: TemplateRef })
+ sendButtonTemplate?: TemplateRef\n 🙋 {event.name} ({event.type})\n
\n \nThe agent wants you to see...
\n\n
\n\n \n
\n {JSON.stringify(event.value, null, 2)}\n How do you want to respond?
\n + } + } + + + @if (toolbarTemplate || toolbarComponent()) { +
+
+ }
+
+ @if (addFileButtonTemplate || addFileButtonComponent()) {
+
+
+ } @else {
+
+
+ }
+ @if (computedToolsMenu().length > 0) {
+ @if (toolsButtonTemplate || toolsButtonComponent()) {
+
+
+ } @else {
+
+
+ }
+ }
+ @if (additionalToolbarItems()) {
+
+
+ @if (computedMode() === "transcribe") {
+ @if (
+ cancelTranscribeButtonTemplate ||
+ cancelTranscribeButtonComponent()
+ ) {
+
+
+ } @else {
+
+
+ }
+ @if (
+ finishTranscribeButtonTemplate ||
+ finishTranscribeButtonComponent()
+ ) {
+
+
+ } @else {
+
+
+ }
+ } @else {
+ @if (
+ startTranscribeButtonTemplate ||
+ startTranscribeButtonComponent()
+ ) {
+
+
+ } @else {
+
+
+ }
+
+ @if (sendButtonTemplate || sendButtonComponent()) {
+
+
+ } @else {
+
+
+
+
+ }
+ }
+
+
+ @for (
+ message of messagesValue();
+ track trackByMessageId($index, message)
+ ) {
+ @if (message && message.role === "assistant") {
+
+ @if (assistantMessageComponent() || assistantMessageTemplate()) {
+
+
+ } @else {
+
+
+ }
+ } @else if (message && message.role === "user") {
+
+ @if (userMessageComponent() || userMessageTemplate()) {
+
+
+ } @else {
+
+
+ }
+ }
+ }
+
+
+ @if (showCursorValue()) {
+ @if (cursorComponent() || cursorTemplate()) {
+
+
+ } @else {
+
+
+ }
+ }
+
+ }
+ `,
+})
+export class CopilotChatMessageView {
+ // Core inputs matching React props
+ messages = input
+ @for (item of toolsMenu(); track $index) {
+ @if (item === "-") {
+
+ } @else if (isMenuItem(item)) {
+ @if (item.items && item.items.length > 0) {
+
+
+
+
+
+
+ } @else {
+
+
+ }
+ }
+ }
+
+
+ @for (subItem of item.items; track $index) {
+ @if (subItem === "-") {
+
+ } @else if (isMenuItem(subItem)) {
+
+ }
+ }
+
+
+
+
+ {{ currentBranch() + 1 }}/{{ numberOfBranches() }}
+
+
+
+ }
+ `,
+})
+export class CopilotChatUserMessageBranchNavigation {
+ currentBranch = input
+
+ @if (messageRendererTemplate || messageRendererComponent()) {
+
+
+ } @else {
+
+
+ }
+
+
+ @if (toolbarTemplate || toolbarComponent()) {
+
+
+ } @else {
+
+ `,
+ styles: [
+ `
+ :host {
+ display: block;
+ width: 100%;
+ }
+ `,
+ ],
+})
+export class CopilotChatUserMessage {
+ // Capture templates from content projection
+ @ContentChild("messageRenderer", { read: TemplateRef })
+ messageRendererTemplate?: TemplateRef
+
+ }
+
+
+ @if (additionalToolbarItems()) {
+
+
+ } @else {
+
+
+ }
+
+
+ @if (true) {
+ @if (editButtonTemplate || editButtonComponent()) {
+
+
+ } @else {
+
+
+ }
+ }
+
+
+ @if (showBranchNavigation()) {
+ @if (branchNavigationTemplate || branchNavigationComponent()) {
+
+
+ } @else {
+
+
+ }
+ }
+
+
+ {{ disclaimerText }}
+
+ `,
+})
+export class CopilotChatViewDisclaimer {
+ inputClass = input
+
+
+
+
+ `,
+})
+export class CopilotChatViewInputContainer extends ElementRef {
+ inputContainerClass = input
+
+
+
+
+
+
+
+ } @else if (!autoScroll()) {
+
+
+
+
+
+ } @else {
+
+
+
+
+
+ @if (showScrollButton() && !isResizing()) {
+
+
+
+
+
+
+ @if (messageView()) {
+
+
+ } @else {
+
+
+ }
+
+
+
+
+
+ }
+
+
+ }
+ `,
+})
+export class CopilotChatViewScrollView
+ implements OnInit, AfterViewInit, OnDestroy
+{
+ private cdr = inject(ChangeDetectorRef);
+
+ autoScroll = input
+
+
+
+
+ @if (!isAtBottom() && !isResizing()) {
+
+
+
+
+
+
+ @if (messageView()) {
+
+
+ } @else {
+
+
+ }
+
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ `,
+})
+export class CopilotChatView
+ implements OnInit, OnChanges, AfterViewInit, OnDestroy
+{
+ // Core inputs matching React props
+ messages = input