@copilotkitnext/angular 0.0.17 → 0.0.19-alpha.0

package/dist/fesm2022/copilotkitnext-angular.mjs

@@ -199,24 +199,17 @@ class RenderToolCalls {
     messages = input.required();
     isLoading = input(false);
     pickRenderer(name) {
-        const messageAgentId = this.message()
-            .agentId;
+        const messageAgentId = this.message().agentId;
         const renderers = this.#copilotKit.toolCallRenderConfigs();
         const clientTools = this.#copilotKit.clientToolCallRenderConfigs();
         const humanInTheLoopTools = this.#copilotKit.humanInTheLoopToolRenderConfigs();
-        const renderer = renderers.find((candidate) => candidate.name === name &&
-            (candidate.agentId === undefined ||
-                candidate.agentId === messageAgentId));
+        const renderer = renderers.find((candidate) => candidate.name === name && (candidate.agentId === undefined || candidate.agentId === messageAgentId));
         if (renderer)
             return { type: "renderer", config: renderer };
-        const clientTool = clientTools.find((candidate) => candidate.name === name &&
-            (candidate.agentId === undefined ||
-                candidate.agentId === messageAgentId));
+        const clientTool = clientTools.find((candidate) => candidate.name === name && (candidate.agentId === undefined || candidate.agentId === messageAgentId));
         if (clientTool)
             return { type: "clientTool", config: clientTool };
-        const humanInTheLoopTool = humanInTheLoopTools.find((candidate) => candidate.name === name &&
-            (candidate.agentId === undefined ||
-                candidate.agentId === messageAgentId));
+        const humanInTheLoopTool = humanInTheLoopTools.find((candidate) => candidate.name === name && (candidate.agentId === undefined || candidate.agentId === messageAgentId));
         if (humanInTheLoopTool)
             return { type: "humanInTheLoopTool", config: humanInTheLoopTool };
         const starRenderer = renderers.find((candidate) => candidate.name === "*");
@@ -278,18 +271,16 @@ class RenderToolCalls {
         }
     }
     #getToolMessage(toolCallId) {
-        return this.messages().find((m) => m.role === "tool" && m.toolCallId === toolCallId);
+        const message = this.messages().find((m) => m.role === "tool" && m.toolCallId === toolCallId);
+        return message;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RenderToolCalls, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RenderToolCalls, isStandalone: true, selector: "copilot-render-tool-calls", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @for (toolCall of message().toolCalls ?? []; track toolCall.id) {
       @let renderConfig = pickRenderer(toolCall.function.name);
-      @if (renderConfig && renderConfig.type !== "humanInTheLoopTool") {
+      @if (renderConfig && renderConfig.type !== "humanInTheLoopTool" && renderConfig.config.component) {
         <ng-container
-          *ngComponentOutlet="
-            renderConfig.config.component;
-            inputs: { toolCall: buildToolCall(toolCall) }
-          "
+          *ngComponentOutlet="renderConfig.config.component; inputs: { toolCall: buildToolCall(toolCall) }"
         />
       }
     }
@@ -304,12 +295,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     template: `
     @for (toolCall of message().toolCalls ?? []; track toolCall.id) {
       @let renderConfig = pickRenderer(toolCall.function.name);
-      @if (renderConfig && renderConfig.type !== "humanInTheLoopTool") {
+      @if (renderConfig && renderConfig.type !== "humanInTheLoopTool" && renderConfig.config.component) {
         <ng-container
-          *ngComponentOutlet="
-            renderConfig.config.component;
-            inputs: { toolCall: buildToolCall(toolCall) }
-          "
+          *ngComponentOutlet="renderConfig.config.component; inputs: { toolCall: buildToolCall(toolCall) }"
         />
       }
     }
@@ -2930,23 +2918,13 @@ class CopilotChatUserMessageBranchNavigation {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CopilotChatUserMessageBranchNavigation, isStandalone: true, selector: "copilot-chat-user-message-branch-navigation", inputs: { currentBranch: { classPropertyName: "currentBranch", publicName: "currentBranch", isSignal: true, isRequired: false, transformFunction: null }, numberOfBranches: { classPropertyName: "numberOfBranches", publicName: "numberOfBranches", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { switchToBranch: "switchToBranch" }, ngImport: i0, template: `
     @if (showNavigation()) {
       <div [class]="computedClass()">
-        <button
-          type="button"
-          [class]="buttonClass"
-          [disabled]="!canGoPrev()"
-          (click)="handlePrevious()"
-        >
+        <button type="button" [class]="buttonClass" [disabled]="!canGoPrev()" (click)="handlePrevious()">
           <lucide-angular [img]="ChevronLeftIcon" [size]="20"></lucide-angular>
         </button>
         <span class="text-sm text-muted-foreground px-0 font-medium">
           {{ currentBranch() + 1 }}/{{ numberOfBranches() }}
         </span>
-        <button
-          type="button"
-          [class]="buttonClass"
-          [disabled]="!canGoNext()"
-          (click)="handleNext()"
-        >
+        <button type="button" [class]="buttonClass" [disabled]="!canGoNext()" (click)="handleNext()">
           <lucide-angular [img]="ChevronRightIcon" [size]="20"></lucide-angular>
         </button>
       </div>
@@ -2964,23 +2942,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     template: `
     @if (showNavigation()) {
       <div [class]="computedClass()">
-        <button
-          type="button"
-          [class]="buttonClass"
-          [disabled]="!canGoPrev()"
-          (click)="handlePrevious()"
-        >
+        <button type="button" [class]="buttonClass" [disabled]="!canGoPrev()" (click)="handlePrevious()">
           <lucide-angular [img]="ChevronLeftIcon" [size]="20"></lucide-angular>
         </button>
         <span class="text-sm text-muted-foreground px-0 font-medium">
           {{ currentBranch() + 1 }}/{{ numberOfBranches() }}
         </span>
-        <button
-          type="button"
-          [class]="buttonClass"
-          [disabled]="!canGoNext()"
-          (click)="handleNext()"
-        >
+        <button type="button" [class]="buttonClass" [disabled]="!canGoNext()" (click)="handleNext()">
           <lucide-angular [img]="ChevronRightIcon" [size]="20"></lucide-angular>
         </button>
       </div>
@@ -2989,6 +2957,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+function flattenUserMessageContent(content) {
+    if (!content) {
+        return "";
+    }
+    if (typeof content === "string") {
+        return content;
+    }
+    return content
+        .map((part) => {
+        if (part &&
+            typeof part === "object" &&
+            "type" in part &&
+            part.type === "text" &&
+            typeof part.text === "string") {
+            return part.text;
+        }
+        return "";
+    })
+        .filter((text) => text.length > 0)
+        .join("\n");
+}
 class CopilotChatUserMessage {
     // Capture templates from content projection
     messageRendererTemplate;
@@ -3030,8 +3019,9 @@ class CopilotChatUserMessage {
     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.message()?.content || "",
+        content: this.flattenedContent(),
     }));
     // Output maps for slots
     copyButtonOutputs = { clicked: () => this.handleCopy() };
@@ -3068,10 +3058,7 @@ class CopilotChatUserMessage {
         >
         </copilot-slot>
       } @else {
-        <copilot-chat-user-message-renderer
-          [content]="message()?.content || ''"
-          [inputClass]="messageRendererClass()"
-        >
+        <copilot-chat-user-message-renderer [content]="flattenedContent()" [inputClass]="messageRendererClass()">
         </copilot-chat-user-message-renderer>
       }
 
@@ -3088,23 +3075,21 @@ class CopilotChatUserMessage {
           <div class="flex items-center gap-1 justify-end">
             <!-- Additional toolbar items -->
             @if (additionalToolbarItems()) {
-              <ng-container
-                [ngTemplateOutlet]="additionalToolbarItems() || null"
-              ></ng-container>
+              <ng-container [ngTemplateOutlet]="additionalToolbarItems() || null"></ng-container>
             }
 
             <!-- Copy button -->
             @if (copyButtonTemplate || copyButtonComponent()) {
               <copilot-slot
                 [slot]="copyButtonTemplate || copyButtonComponent()"
-                [context]="{ content: message()?.content || '' }"
+                [context]="{ content: flattenedContent() }"
                 [outputs]="copyButtonOutputs"
                 [defaultComponent]="CopilotChatUserMessageCopyButton"
               >
               </copilot-slot>
             } @else {
               <copilot-chat-user-message-copy-button
-                [content]="message()?.content"
+                [content]="flattenedContent()"
                 [inputClass]="copyButtonClass()"
                 (clicked)="handleCopy()"
               >
@@ -3122,10 +3107,7 @@ class CopilotChatUserMessage {
                 >
                 </copilot-slot>
               } @else {
-                <copilot-chat-user-message-edit-button
-                  [inputClass]="editButtonClass()"
-                  (clicked)="handleEdit()"
-                >
+                <copilot-chat-user-message-edit-button [inputClass]="editButtonClass()" (clicked)="handleEdit()">
                 </copilot-chat-user-message-edit-button>
               }
             }
@@ -3134,9 +3116,7 @@ class CopilotChatUserMessage {
             @if (showBranchNavigation()) {
               @if (branchNavigationTemplate || branchNavigationComponent()) {
                 <copilot-slot
-                  [slot]="
-                    branchNavigationTemplate || branchNavigationComponent()
-                  "
+                  [slot]="branchNavigationTemplate || branchNavigationComponent()"
                   [context]="branchNavigationContext()"
                   [defaultComponent]="CopilotChatUserMessageBranchNavigation"
                 >
@@ -3179,10 +3159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         >
         </copilot-slot>
       } @else {
-        <copilot-chat-user-message-renderer
-          [content]="message()?.content || ''"
-          [inputClass]="messageRendererClass()"
-        >
+        <copilot-chat-user-message-renderer [content]="flattenedContent()" [inputClass]="messageRendererClass()">
         </copilot-chat-user-message-renderer>
       }
 
@@ -3199,23 +3176,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           <div class="flex items-center gap-1 justify-end">
             <!-- Additional toolbar items -->
             @if (additionalToolbarItems()) {
-              <ng-container
-                [ngTemplateOutlet]="additionalToolbarItems() || null"
-              ></ng-container>
+              <ng-container [ngTemplateOutlet]="additionalToolbarItems() || null"></ng-container>
             }
 
             <!-- Copy button -->
             @if (copyButtonTemplate || copyButtonComponent()) {
               <copilot-slot
                 [slot]="copyButtonTemplate || copyButtonComponent()"
-                [context]="{ content: message()?.content || '' }"
+                [context]="{ content: flattenedContent() }"
                 [outputs]="copyButtonOutputs"
                 [defaultComponent]="CopilotChatUserMessageCopyButton"
               >
               </copilot-slot>
             } @else {
               <copilot-chat-user-message-copy-button
-                [content]="message()?.content"
+                [content]="flattenedContent()"
                 [inputClass]="copyButtonClass()"
                 (clicked)="handleCopy()"
               >
@@ -3233,10 +3208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 >
                 </copilot-slot>
               } @else {
-                <copilot-chat-user-message-edit-button
-                  [inputClass]="editButtonClass()"
-                  (clicked)="handleEdit()"
-                >
+                <copilot-chat-user-message-edit-button [inputClass]="editButtonClass()" (clicked)="handleEdit()">
                 </copilot-chat-user-message-edit-button>
               }
             }
@@ -3245,9 +3217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             @if (showBranchNavigation()) {
               @if (branchNavigationTemplate || branchNavigationComponent()) {
                 <copilot-slot
-                  [slot]="
-                    branchNavigationTemplate || branchNavigationComponent()
-                  "
+                  [slot]="branchNavigationTemplate || branchNavigationComponent()"
                   [context]="branchNavigationContext()"
                   [defaultComponent]="CopilotChatUserMessageBranchNavigation"
                 >