Merge main into feat-storage-browser/main

docs/package.json

@@ -23,7 +23,7 @@
  "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
  },
  "dependencies": {
- "@aws-amplify/ui-react": "6.5.1",
+ "@aws-amplify/ui-react": "6.5.2",
  "@docsearch/react": "3",
  "@mdx-js/loader": "^2.1.0",
  "@mdx-js/mdx": "^2.1.0",

examples/angular/package.json

@@ -20,7 +20,7 @@
  "@angular/platform-browser": "^14.3.0",
  "@angular/platform-browser-dynamic": "^14.3.0",
  "@angular/router": "^14.3.0",
- "@aws-amplify/ui-angular": "^5.0.26",
+ "@aws-amplify/ui-angular": "^5.0.27",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.11.4"

examples/next/package.json

@@ -10,12 +10,12 @@
  "lint": "next lint"
  },
  "dependencies": {
- "@aws-amplify/ui-react": "^6.5.1",
- "@aws-amplify/ui-react-ai": "0.2.1",
- "@aws-amplify/ui-react-geo": "^2.0.26",
- "@aws-amplify/ui-react-liveness": "^3.1.11",
- "@aws-amplify/ui-react-notifications": "^2.0.30",
- "@aws-amplify/ui-react-storage": "^3.3.5",
+ "@aws-amplify/ui-react": "^6.5.2",
+ "@aws-amplify/ui-react-ai": "0.3.0",
+ "@aws-amplify/ui-react-geo": "^2.0.27",
+ "@aws-amplify/ui-react-liveness": "^3.1.12",
+ "@aws-amplify/ui-react-notifications": "^2.0.31",
+ "@aws-amplify/ui-react-storage": "^3.3.6",
  "@aws-sdk/credential-providers": "^3.370.0",
  "next": "^14.2.10",
  "next-global-css": "^1.1.1",

examples/next/pages/ui/components/ai/ai-conversation/index.page.tsx

@@ -36,6 +36,7 @@ function Chat() {
  messages={messages}
  handleSendMessage={sendMessage}
  isLoading={isLoading}
+ allowAttachments
  suggestedPrompts={[
  {
  inputText: 'hello',

examples/vue/package.json

@@ -11,7 +11,7 @@
  "start": "vite preview --port 3000"
  },
  "dependencies": {
- "@aws-amplify/ui-vue": "^4.2.18",
+ "@aws-amplify/ui-vue": "^4.2.19",
  "vue": "^3.0.5",
  "vue-router": "4"
  },

packages/angular/projects/ui-angular/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @aws-amplify/ui-angular
 
+## 5.0.27
+
+### Patch Changes
+
+- [#5830](https://github.com/aws-amplify/amplify-ui/pull/5830) [`545aa6a60`](https://github.com/aws-amplify/amplify-ui/commit/545aa6a608b68b9fb78f5df56da0e1e09b537d58) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(rollup): upgrade rollup deps, migrate to mjs config file, enforce linting on mjs files
+
+- Updated dependencies [[`22e285f58`](https://github.com/aws-amplify/amplify-ui/commit/22e285f5802e40b78c5a055a7384943c41252428), [`545aa6a60`](https://github.com/aws-amplify/amplify-ui/commit/545aa6a608b68b9fb78f5df56da0e1e09b537d58), [`87d74a7de`](https://github.com/aws-amplify/amplify-ui/commit/87d74a7deaa7d0cf393dfed3fb3cc85a3790c382)]:
+ - @aws-amplify/[email protected]
+
 ## 5.0.26
 
 ### Patch Changes

packages/angular/projects/ui-angular/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@aws-amplify/ui-angular",
- "version": "5.0.26",
+ "version": "5.0.27",
  "scripts": {
  "build": "yarn --cwd ../../ build",
  "dev": "yarn --cwd ../../ dev",
@@ -20,7 +20,7 @@
  "rxjs": "^6.5.3 || ^7.4.0"
  },
  "dependencies": {
- "@aws-amplify/ui": "6.6.1",
+ "@aws-amplify/ui": "6.6.2",
  "nanoid": "3.1.31",
  "qrcode": "1.5.0",
  "tslib": "^2.5.2",

packages/angular/projects/ui-angular/src/version.ts

@@ -1 +1 @@
-export const VERSION = '5.0.26';
+export const VERSION = '5.0.27';

packages/e2e/package.json

@@ -29,7 +29,7 @@
  ]
  },
  "devDependencies": {
- "@aws-amplify/ui": "^6.6.1",
+ "@aws-amplify/ui": "^6.6.2",
  "@badeball/cypress-cucumber-preprocessor": "^18.0.6",
  "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
  "@cucumber/cucumber": "^10.0.1",

packages/react-ai/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @aws-amplify/ui-react-ai
 
+## 0.3.0
+
+### Minor Changes
+
+- [#5802](https://github.com/aws-amplify/amplify-ui/pull/5802) [`8b4a28b9f`](https://github.com/aws-amplify/amplify-ui/commit/8b4a28b9f656a7963399d4e797646af0e26b1bf5) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(ai-conversation): add allowAttachments prop
+
+ BREAKING - This is a breaking change to an experimental API. Previously, the AIConversation component always allowed attachments. Now you will need to provide the `allowAttachments` prop to get the same behavior. The reason for this change is that attachments can quickly cost a lot based on the token use and we didn't want the default behavior to have that.
+
+ ```jsx
+ <AIConversation
+ allowAttachments
+ messages={messages}
+ handleSendMessage={handleSendMessage}
+ />
+ ```
+
+### Patch Changes
+
+- [#5830](https://github.com/aws-amplify/amplify-ui/pull/5830) [`545aa6a60`](https://github.com/aws-amplify/amplify-ui/commit/545aa6a608b68b9fb78f5df56da0e1e09b537d58) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(rollup): upgrade rollup deps, migrate to mjs config file, enforce linting on mjs files
+
+- Updated dependencies [[`22e285f58`](https://github.com/aws-amplify/amplify-ui/commit/22e285f5802e40b78c5a055a7384943c41252428), [`545aa6a60`](https://github.com/aws-amplify/amplify-ui/commit/545aa6a608b68b9fb78f5df56da0e1e09b537d58), [`87d74a7de`](https://github.com/aws-amplify/amplify-ui/commit/87d74a7deaa7d0cf393dfed3fb3cc85a3790c382)]:
+ - @aws-amplify/[email protected]
+ - @aws-amplify/[email protected]
+ - @aws-amplify/[email protected]
+
 ## 0.2.1
 
 ### Patch Changes

packages/react-ai/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@aws-amplify/ui-react-ai",
- "version": "0.2.1",
+ "version": "0.3.0",
  "main": "dist/index.js",
  "module": "dist/esm/index.mjs",
  "exports": {
@@ -48,9 +48,9 @@
  "react-dom": "^16.14.0 || ^17.0 || ^18.0"
  },
  "dependencies": {
- "@aws-amplify/ui": "^6.6.1",
- "@aws-amplify/ui-react": "^6.5.1",
- "@aws-amplify/ui-react-core": "^3.0.25"
+ "@aws-amplify/ui": "^6.6.2",
+ "@aws-amplify/ui-react": "^6.5.2",
+ "@aws-amplify/ui-react-core": "^3.0.26"
  },
  "devDependencies": {
  "@types/jest-when": "^3.5.0",

packages/react-ai/src/components/AIConversation/AIConversation.tsx

@@ -30,6 +30,7 @@ function AIConversationBase({
  variant,
  isLoading,
  displayText,
+ allowAttachments,
 }: AIConversationBaseProps): JSX.Element {
  const icons = useIcons('aiConversation');
  const defaultAvatars: Avatars = {
@@ -72,6 +73,7 @@ function AIConversationBase({
  ...avatars,
  },
  isLoading,
+ allowAttachments,
  };
 
  return (

packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const AttachmentContext = React.createContext(false);
+
+export const AttachmentProvider = ({
+ children,
+ allowAttachments,
+}: {
+ children?: React.ReactNode;
+ allowAttachments?: boolean;
+}): JSX.Element => {
+ return (
+ <AttachmentContext.Provider value={allowAttachments ?? false}>
+ {children}
+ </AttachmentContext.Provider>
+ );
+};

packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx

@@ -7,6 +7,7 @@ export interface ControlsContextProps {
  Form?: React.ComponentType<
  {
  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+ allowAttachments?: boolean;
  } & Required<ConversationInputContext>
  >;
  MessageList?: React.ComponentType<{ messages: ConversationMessage[] }>;

packages/react-ai/src/components/AIConversation/createAIConversation.tsx

@@ -30,6 +30,7 @@ export function createAIConversation(input: AIConversationInput = {}): {
  variant,
  controls,
  displayText,
+ allowAttachments,
  } = input;
 
  const Provider = createProvider({
@@ -40,6 +41,7 @@ export function createAIConversation(input: AIConversationInput = {}): {
  variant,
  controls,
  displayText,
+ allowAttachments,
  });
 
  function AIConversation(props: AIConversationProps): JSX.Element {

packages/react-ai/src/components/AIConversation/createProvider.tsx

@@ -17,6 +17,7 @@ import {
  ResponseComponentsProvider,
  SendMessageContextProvider,
 } from './context';
+import { AttachmentProvider } from './context/AttachmentContext';
 
 export default function createProvider({
  elements,
@@ -26,6 +27,7 @@ export default function createProvider({
  variant,
  controls,
  displayText,
+ allowAttachments,
 }: Pick<
  AIConversationInput,
  | 'elements'
@@ -35,6 +37,7 @@ export default function createProvider({
  | 'variant'
  | 'controls'
  | 'displayText'
+ | 'allowAttachments'
 >) {
  return function Provider({
  children,
@@ -57,25 +60,27 @@ export default function createProvider({
  <ControlsProvider controls={controls}>
  <SuggestedPromptProvider suggestedPrompts={suggestedPrompts}>
  <ResponseComponentsProvider responseComponents={responseComponents}>
- <ConversationDisplayTextProvider {..._displayText}>
- <ConversationInputContextProvider>
- <SendMessageContextProvider
- handleSendMessage={handleSendMessage}
- >
- <AvatarsProvider avatars={avatars}>
- <ActionsProvider actions={actions}>
- <MessageVariantProvider variant={variant}>
- <MessagesProvider messages={messages}>
- <LoadingContextProvider isLoading={isLoading}>
- {children}
- </LoadingContextProvider>
- </MessagesProvider>
- </MessageVariantProvider>
- </ActionsProvider>
- </AvatarsProvider>
- </SendMessageContextProvider>
- </ConversationInputContextProvider>
- </ConversationDisplayTextProvider>
+ <AttachmentProvider allowAttachments={allowAttachments}>
+ <ConversationDisplayTextProvider {..._displayText}>
+ <ConversationInputContextProvider>
+ <SendMessageContextProvider
+ handleSendMessage={handleSendMessage}
+ >
+ <AvatarsProvider avatars={avatars}>
+ <ActionsProvider actions={actions}>
+ <MessageVariantProvider variant={variant}>
+ <MessagesProvider messages={messages}>
+ <LoadingContextProvider isLoading={isLoading}>
+ {children}
+ </LoadingContextProvider>
+ </MessagesProvider>
+ </MessageVariantProvider>
+ </ActionsProvider>
+ </AvatarsProvider>
+ </SendMessageContextProvider>
+ </ConversationInputContextProvider>
+ </ConversationDisplayTextProvider>
+ </AttachmentProvider>
  </ResponseComponentsProvider>
  </SuggestedPromptProvider>
  </ControlsProvider>

packages/react-ai/src/components/AIConversation/types.ts

@@ -31,6 +31,7 @@ export interface AIConversationInput {
  responseComponents?: ResponseComponents;
  variant?: MessageVariant;
  controls?: ControlsContextProps;
+ allowAttachments?: boolean;
 }
 
 export interface AIConversationProps {

packages/react-ai/src/components/AIConversation/views/Controls/AttachFileControl.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
 import { ConversationInputContext } from '../../context';
 import { AIConversationElements } from '../../context/elements';
+import { useDropZone } from '@aws-amplify/ui-react-core';
 
 const { Button, Icon, View } = AIConversationElements;
 
@@ -32,6 +33,17 @@ const AttachFileButton = withBaseElementProps(Button, {
 export const AttachFileControl: AttachFileControl = () => {
  const hiddenInput = React.useRef<HTMLInputElement>(null);
  const { setInput } = React.useContext(ConversationInputContext);
+ const { dragState, ...dropHandlers } = useDropZone({
+ acceptedFileTypes: ['.jpeg'],
+ onDropComplete: ({ acceptedFiles }) => {
+ if (acceptedFiles && acceptedFiles?.length > 0 && setInput) {
+ setInput((prevInput) => ({
+ ...prevInput,
+ files: [...(prevInput?.files ?? []), ...acceptedFiles],
+ }));
+ }
+ },
+ });
 
  function handleButtonClick() {
  if (hiddenInput.current) {
@@ -53,7 +65,7 @@ export const AttachFileControl: AttachFileControl = () => {
  }
 
  return (
- <AttachFileContainer>
+ <AttachFileContainer {...dropHandlers}>
  <AttachFileButton onClick={handleButtonClick}>
  <AttachFileIcon />
  </AttachFileButton>

packages/react-ai/src/components/AIConversation/views/Controls/FieldControl.tsx

@@ -15,6 +15,7 @@ import {
 import { ControlsContext } from '../../context/ControlsContext';
 import { getImageTypeFromMimeType } from '../../utils';
 import { LoadingContext } from '../../context/LoadingContext';
+import { AttachmentContext } from '../../context/AttachmentContext';
 
 const {
  Button,
@@ -148,6 +149,7 @@ const InputContainer = withBaseElementProps(View, {
 export const FieldControl: FieldControl = () => {
  const { input, setInput } = React.useContext(ConversationInputContext);
  const handleSendMessage = React.useContext(SendMessageContext);
+ const allowAttachments = React.useContext(AttachmentContext);
  const ref = React.useRef<HTMLFormElement | null>(null);
  const responseComponents = React.useContext(ResponseComponentsContext);
  const controls = React.useContext(ControlsContext);
@@ -212,6 +214,7 @@ export const FieldControl: FieldControl = () => {
  handleSubmit={handleSubmit}
  input={input!}
  setInput={setInput!}
+ allowAttachments={allowAttachments}
  />
  );
  }
@@ -223,7 +226,7 @@ export const FieldControl: FieldControl = () => {
  method="post"
  ref={ref}
  >
- <AttachFileControl />
+ {allowAttachments ? <AttachFileControl /> : null}
  <InputContainer>
  <VisuallyHidden>
  <Label />