@aws/nx-plugin 0.104.1 → 0.106.0

package/src/ts/react-website/agui/files/cloudscape/src/components/copilot/CloudscapeChatInput.tsx.template

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import {
+  CopilotChatInput,
+  type CopilotChatInputProps,
+} from '@copilotkit/react-core/v2';
+import PromptInput from '@cloudscape-design/components/prompt-input';
+
+const CloudscapeChatInputImpl = ({
+  value,
+  onChange,
+  onSubmitMessage,
+  onStop,
+  isRunning,
+  autoFocus,
+  mode,
+}: CopilotChatInputProps) => {
+  const [internalValue, setInternalValue] = useState('');
+  const currentValue = value ?? internalValue;
+  const disabled = mode === 'processing';
+
+  const handleChange = (next: string) => {
+    onChange?.(next);
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+  };
+
+  const handleAction = () => {
+    if (isRunning) {
+      onStop?.();
+      return;
+    }
+    const trimmed = currentValue.trim();
+    if (!trimmed) return;
+    onSubmitMessage?.(trimmed);
+    if (value === undefined) {
+      setInternalValue('');
+    }
+  };
+
+  return (
+    <div className="copilotkit-cloudscape-input">
+      <PromptInput
+        value={currentValue}
+        onChange={({ detail }) => handleChange(detail.value)}
+        onAction={handleAction}
+        actionButtonAriaLabel={isRunning ? 'Stop' : 'Send message'}
+        actionButtonIconName={isRunning ? 'close' : 'send'}
+        ariaLabel="Chat input"
+        placeholder="Ask me anything..."
+        autoFocus={autoFocus}
+        disabled={disabled}
+        minRows={2}
+        maxRows={6}
+      />
+    </div>
+  );
+};
+
+export const CloudscapeChatInput = Object.assign(
+  CloudscapeChatInputImpl,
+  CopilotChatInput,
+);
+
+export default CloudscapeChatInput;

package/src/ts/react-website/agui/files/cloudscape/src/components/copilot/CloudscapeCursor.tsx.template

@@ -0,0 +1,10 @@
+import { CopilotChatMessageView } from '@copilotkit/react-core/v2';
+import LoadingBar from '@cloudscape-design/chat-components/loading-bar';
+
+export const CloudscapeCursor: typeof CopilotChatMessageView.Cursor = () => (
+  <div aria-label="Generating response" role="status">
+    <LoadingBar variant="gen-ai-masked" />
+  </div>
+);
+
+export default CloudscapeCursor;

package/src/ts/react-website/agui/files/cloudscape/src/components/copilot/CloudscapeUserMessage.tsx.template

@@ -0,0 +1,42 @@
+import { CopilotChatUserMessage } from '@copilotkit/react-core/v2';
+import type { CopilotChatUserMessageProps } from '@copilotkit/react-core/v2';
+import ChatBubble from '@cloudscape-design/chat-components/chat-bubble';
+import Avatar from '@cloudscape-design/chat-components/avatar';
+
+const flattenContent = (
+  content: CopilotChatUserMessageProps['message']['content'],
+): string => {
+  if (!content) return '';
+  if (typeof content === 'string') return content;
+  return content
+    .filter(
+      (part): part is { type: 'text'; text: string } =>
+        !!part &&
+        typeof part === 'object' &&
+        'type' in part &&
+        (part as { type?: unknown }).type === 'text' &&
+        'text' in part &&
+        typeof (part as { text?: unknown }).text === 'string',
+    )
+    .map((part) => part.text)
+    .join('\n');
+};
+
+const CloudscapeUserMessageImpl = ({ message }: CopilotChatUserMessageProps) => (
+  <ChatBubble
+    ariaLabel="Your message"
+    type="outgoing"
+    avatar={<Avatar ariaLabel="You" tooltipText="You" initials="Me" />}
+  >
+    <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+      {flattenContent(message.content)}
+    </div>
+  </ChatBubble>
+);
+
+export const CloudscapeUserMessage = Object.assign(
+  CloudscapeUserMessageImpl,
+  CopilotChatUserMessage,
+);
+
+export default CloudscapeUserMessage;

package/src/ts/react-website/agui/files/cloudscape/src/components/copilot/copilot.css.template

@@ -0,0 +1,128 @@
+/* Explicit styles for the Streamdown markdown output (CopilotKit emits
+ * unprefixed Tailwind utilities that the website's Tailwind build can't see). */
+
+.copilotkit-cloudscape-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.copilotkit-cloudscape-input {
+  padding: 12px 16px 16px;
+  background: var(--awsui-color-background-container-content, #ffffff);
+  border-top: 1px solid var(--awsui-color-border-divider-default, #dfe3e6);
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='strong'] {
+  font-weight: 600;
+}
+.copilotkit-cloudscape-messages [data-streamdown='emphasis'] {
+  font-style: italic;
+}
+.copilotkit-cloudscape-messages [data-streamdown='paragraph'],
+.copilotkit-cloudscape-messages > p {
+  margin: 0.5em 0;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='heading-1'],
+.copilotkit-cloudscape-messages [data-streamdown='heading-2'],
+.copilotkit-cloudscape-messages [data-streamdown='heading-3'],
+.copilotkit-cloudscape-messages [data-streamdown='heading-4'],
+.copilotkit-cloudscape-messages [data-streamdown='heading-5'],
+.copilotkit-cloudscape-messages [data-streamdown='heading-6'] {
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0.8em 0 0.4em;
+}
+.copilotkit-cloudscape-messages [data-streamdown='heading-1'] {
+  font-size: 1.5em;
+}
+.copilotkit-cloudscape-messages [data-streamdown='heading-2'] {
+  font-size: 1.3em;
+}
+.copilotkit-cloudscape-messages [data-streamdown='heading-3'] {
+  font-size: 1.15em;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='unordered-list'] {
+  list-style: disc;
+  padding-inline-start: 1.5em;
+  margin: 0.5em 0;
+}
+.copilotkit-cloudscape-messages [data-streamdown='ordered-list'] {
+  list-style: decimal;
+  padding-inline-start: 1.5em;
+  margin: 0.5em 0;
+}
+.copilotkit-cloudscape-messages [data-streamdown='list-item'] {
+  margin: 0.25em 0;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='inline-code'],
+.copilotkit-cloudscape-messages code {
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+  font-family: var(--font-family-monospace, ui-monospace, monospace);
+  font-size: 0.9em;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='code-block'] {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  margin: 0.75em 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+.copilotkit-cloudscape-messages [data-streamdown='code-block'] pre {
+  margin: 0;
+  padding: 12px 16px;
+  overflow-x: auto;
+  white-space: pre;
+  font-family: var(--font-family-monospace, ui-monospace, monospace);
+  font-size: 0.85em;
+  line-height: 1.5;
+}
+.copilotkit-cloudscape-messages [data-streamdown='code-block'] code {
+  background: transparent;
+  padding: 0;
+  white-space: pre;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='blockquote'] {
+  border-inline-start: 3px solid rgba(0, 0, 0, 0.15);
+  margin: 0.5em 0;
+  padding-inline-start: 1em;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.copilotkit-cloudscape-messages table[data-streamdown='table-wrapper'] {
+  border-collapse: collapse;
+  margin: 0.75em 0;
+  max-width: 100%;
+  overflow-x: auto;
+  width: auto;
+}
+.copilotkit-cloudscape-messages table[data-streamdown='table-wrapper'] th,
+.copilotkit-cloudscape-messages table[data-streamdown='table-wrapper'] td {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 6px 10px;
+  text-align: start;
+}
+.copilotkit-cloudscape-messages table[data-streamdown='table-wrapper'] th {
+  background: rgba(0, 0, 0, 0.04);
+  font-weight: 600;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='link'] {
+  color: var(--awsui-color-text-link-default, #0972d3);
+  text-decoration: underline;
+}
+
+.copilotkit-cloudscape-messages [data-streamdown='horizontal-rule'] {
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  margin: 1em 0;
+}

package/src/ts/react-website/agui/files/cloudscape/src/components/copilot/index.tsx.template

@@ -0,0 +1,46 @@
+import {
+  CopilotChat as CopilotChatBase,
+  CopilotSidebar as CopilotSidebarBase,
+  CopilotPopup as CopilotPopupBase,
+  CopilotChatView,
+  type CopilotChatProps,
+  type CopilotSidebarProps,
+  type CopilotPopupProps,
+} from '@copilotkit/react-core/v2';
+import { CloudscapeAssistantMessage } from './CloudscapeAssistantMessage';
+import { CloudscapeUserMessage } from './CloudscapeUserMessage';
+import { CloudscapeChatInput } from './CloudscapeChatInput';
+import { CloudscapeCursor } from './CloudscapeCursor';
+import './copilot.css';
+
+const NoopFeather: typeof CopilotChatView.Feather = () => null;
+
+export const cloudscapeCopilotTheme = {
+  messageView: {
+    assistantMessage: CloudscapeAssistantMessage,
+    userMessage: CloudscapeUserMessage,
+    cursor: CloudscapeCursor,
+    className: 'copilotkit-cloudscape-messages',
+  },
+  input: CloudscapeChatInput,
+  scrollView: { feather: NoopFeather },
+} as const;
+
+export const CopilotChat = (props: CopilotChatProps) => (
+  <CopilotChatBase {...cloudscapeCopilotTheme} {...props} />
+);
+
+export const CopilotSidebar = (props: CopilotSidebarProps) => (
+  <CopilotSidebarBase {...cloudscapeCopilotTheme} {...props} />
+);
+
+export const CopilotPopup = (props: CopilotPopupProps) => (
+  <CopilotPopupBase {...cloudscapeCopilotTheme} {...props} />
+);
+
+export {
+  CloudscapeAssistantMessage,
+  CloudscapeUserMessage,
+  CloudscapeChatInput,
+  CloudscapeCursor,
+};

package/src/ts/react-website/agui/files/{src → common/src}/components/AguiProvider.tsx.template

@@ -1,8 +1,13 @@
-import { CopilotKitProvider } from '@copilotkit/react-core/v2';
+import {
+  CopilotKitProvider,
+  WildcardToolCallRender,
+} from '@copilotkit/react-core/v2';
 import '@copilotkit/react-core/v2/styles.css';
 import { type FC, type PropsWithChildren, useMemo } from 'react';
 import type { AbstractAgent } from '@ag-ui/client';
 
+const renderToolCalls = [WildcardToolCallRender];
+
 export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   const selfManagedAgents = useMemo<Record<string, AbstractAgent>>(
     () => ({}),
@@ -10,7 +15,10 @@ export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   );
 
   return (
-    <CopilotKitProvider selfManagedAgents={selfManagedAgents}>
+    <CopilotKitProvider
+      selfManagedAgents={selfManagedAgents}
+      renderToolCalls={renderToolCalls}
+    >
       {children}
     </CopilotKitProvider>
   );

package/src/ts/react-website/agui/files/default/src/components/copilot/index.tsx.template

@@ -0,0 +1,5 @@
+export {
+  CopilotChat,
+  CopilotSidebar,
+  CopilotPopup,
+} from '@copilotkit/react-core/v2';

package/src/ts/react-website/agui/files/shadcn/src/components/copilot/ShadcnAssistantMessage.tsx.template

@@ -0,0 +1,71 @@
+import {
+  CopilotChatAssistantMessage,
+  CopilotChatToolCallsView,
+} from '@copilotkit/react-core/v2';
+import type { CopilotChatAssistantMessageProps } from '@copilotkit/react-core/v2';
+import { Copy, Sparkles } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+} from '<%= scopeAlias %>common-shadcn/components/ui/avatar';
+import { Button } from '<%= scopeAlias %>common-shadcn/components/ui/button';
+import { cn } from '<%= scopeAlias %>common-shadcn/lib/utils';
+
+const ShadcnAssistantMessageImpl = ({
+  message,
+  messages,
+}: CopilotChatAssistantMessageProps) => {
+  const hasContent = !!(message.content && message.content.trim().length > 0);
+
+  const handleCopy = () => {
+    if (typeof message.content === 'string') {
+      void navigator.clipboard?.writeText(message.content);
+    }
+  };
+
+  return (
+    <div className="group flex items-start gap-3 py-2">
+      <Avatar className="bg-primary/10 border-primary/20 mt-0.5 border">
+        <AvatarFallback className="bg-transparent">
+          <Sparkles className="text-primary size-4" />
+        </AvatarFallback>
+      </Avatar>
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        <div
+          className={cn(
+            'bg-muted/60 text-foreground rounded-2xl rounded-tl-sm px-4 py-3',
+            'copilotkit-shadcn-markdown',
+          )}
+        >
+          <CopilotChatAssistantMessage.MarkdownRenderer
+            content={message.content ?? ''}
+          />
+        </div>
+        {message.toolCalls && message.toolCalls.length > 0 && (
+          <CopilotChatToolCallsView message={message} messages={messages} />
+        )}
+        {hasContent && (
+          <div className="text-muted-foreground flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              aria-label="Copy message"
+              onClick={handleCopy}
+            >
+              <Copy className="size-3.5" />
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ShadcnAssistantMessage = Object.assign(
+  ShadcnAssistantMessageImpl,
+  CopilotChatAssistantMessage,
+);
+
+export default ShadcnAssistantMessage;

package/src/ts/react-website/agui/files/shadcn/src/components/copilot/ShadcnChatInput.tsx.template

@@ -0,0 +1,117 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  type KeyboardEvent,
+} from 'react';
+import {
+  CopilotChatInput,
+  type CopilotChatInputProps,
+} from '@copilotkit/react-core/v2';
+import { ArrowUp, Square } from 'lucide-react';
+import { Button } from '<%= scopeAlias %>common-shadcn/components/ui/button';
+import { Textarea } from '<%= scopeAlias %>common-shadcn/components/ui/textarea';
+import { cn } from '<%= scopeAlias %>common-shadcn/lib/utils';
+
+const MAX_ROWS = 8;
+
+const ShadcnChatInputImpl = ({
+  value,
+  onChange,
+  onSubmitMessage,
+  onStop,
+  isRunning,
+  autoFocus,
+  mode,
+}: CopilotChatInputProps) => {
+  const [internalValue, setInternalValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const currentValue = value ?? internalValue;
+  const disabled = mode === 'processing';
+
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    const lineHeight = parseFloat(getComputedStyle(el).lineHeight || '20');
+    el.style.height = `${Math.min(el.scrollHeight, lineHeight * MAX_ROWS)}px`;
+  }, [currentValue]);
+
+  const setValue = (next: string) => {
+    onChange?.(next);
+    if (value === undefined) setInternalValue(next);
+  };
+
+  const submit = () => {
+    const trimmed = currentValue.trim();
+    if (!trimmed) return;
+    onSubmitMessage?.(trimmed);
+    if (value === undefined) setInternalValue('');
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  return (
+    <div className="px-4 pb-4 pt-2">
+      <div
+        className={cn(
+          'bg-background border-input focus-within:border-ring focus-within:ring-ring/30',
+          'flex items-end gap-2 rounded-3xl border px-3 py-2',
+          'shadow-[0_2px_10px_rgba(0,0,0,0.06)]',
+          'focus-within:ring-4 transition-[border,box-shadow]',
+        )}
+      >
+        <Textarea
+          ref={textareaRef}
+          value={currentValue}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          placeholder="Ask me anything..."
+          rows={1}
+          className={cn(
+            'flex-1 resize-none border-0 bg-transparent p-2 shadow-none',
+            'focus-visible:ring-0 focus-visible:ring-offset-0',
+            'min-h-0 max-h-48 leading-6',
+          )}
+        />
+        {isRunning ? (
+          <Button
+            type="button"
+            variant="secondary"
+            size="icon"
+            onClick={onStop}
+            aria-label="Stop"
+            className="size-9 rounded-full"
+          >
+            <Square className="size-4" fill="currentColor" />
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            size="icon"
+            onClick={submit}
+            disabled={disabled || !currentValue.trim()}
+            aria-label="Send message"
+            className="size-9 rounded-full"
+          >
+            <ArrowUp className="size-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ShadcnChatInput = Object.assign(
+  ShadcnChatInputImpl,
+  CopilotChatInput,
+);
+
+export default ShadcnChatInput;

package/src/ts/react-website/agui/files/shadcn/src/components/copilot/ShadcnCursor.tsx.template

@@ -0,0 +1,23 @@
+import { CopilotChatMessageView } from '@copilotkit/react-core/v2';
+import { cn } from '<%= scopeAlias %>common-shadcn/lib/utils';
+
+export const ShadcnCursor: typeof CopilotChatMessageView.Cursor = () => (
+  <div
+    role="status"
+    aria-label="Generating response"
+    className="flex items-center gap-1 px-4 py-2"
+  >
+    {[0, 1, 2].map((i) => (
+      <span
+        key={i}
+        className={cn(
+          'bg-muted-foreground/60 size-1.5 rounded-full',
+          'animate-bounce',
+        )}
+        style={{ animationDelay: `${i * 120}ms` }}
+      />
+    ))}
+  </div>
+);
+
+export default ShadcnCursor;

package/src/ts/react-website/agui/files/shadcn/src/components/copilot/ShadcnUserMessage.tsx.template

@@ -0,0 +1,49 @@
+import { CopilotChatUserMessage } from '@copilotkit/react-core/v2';
+import type {
+  CopilotChatUserMessageProps,
+  UserMessage,
+} from '@copilotkit/react-core/v2';
+import { User } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+} from '<%= scopeAlias %>common-shadcn/components/ui/avatar';
+
+const flattenContent = (content: UserMessage['content']): string => {
+  if (!content) return '';
+  if (typeof content === 'string') return content;
+  return content
+    .filter(
+      (part): part is { type: 'text'; text: string } =>
+        !!part &&
+        typeof part === 'object' &&
+        'type' in part &&
+        (part as { type?: unknown }).type === 'text' &&
+        'text' in part &&
+        typeof (part as { text?: unknown }).text === 'string',
+    )
+    .map((part) => part.text)
+    .join('\n');
+};
+
+const ShadcnUserMessageImpl = ({ message }: CopilotChatUserMessageProps) => (
+  <div className="flex items-start justify-end gap-3 py-2">
+    <div className="flex min-w-0 max-w-[85%] flex-col items-end gap-1.5">
+      <div className="bg-primary text-primary-foreground rounded-2xl rounded-tr-sm px-4 py-2.5 whitespace-pre-wrap break-words">
+        {flattenContent(message.content)}
+      </div>
+    </div>
+    <Avatar className="bg-secondary mt-0.5">
+      <AvatarFallback className="bg-transparent">
+        <User className="text-secondary-foreground size-4" />
+      </AvatarFallback>
+    </Avatar>
+  </div>
+);
+
+export const ShadcnUserMessage = Object.assign(
+  ShadcnUserMessageImpl,
+  CopilotChatUserMessage,
+);
+
+export default ShadcnUserMessage;