-
Notifications
You must be signed in to change notification settings - Fork 285
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(ai): add theming for AIConversation (#5827)
- Loading branch information
1 parent
1421dde
commit ac7cb27
Showing
13 changed files
with
702 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| --- | ||
| "@aws-amplify/ui": patch | ||
| --- | ||
|
|
||
| chore(ai): add theming for AIConversation | ||
|
|
||
| ```ts | ||
| const theme = createTheme({ | ||
| tokens: { | ||
| components: { | ||
| aiConversation: {} | ||
| } | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ```ts | ||
| const aiConversationTheme = defineComponentTheme({ | ||
| name: 'ai-conversation', | ||
| theme(tokens) { | ||
| return { | ||
| _element: { | ||
| message: { | ||
| color: tokens.colors.font.tertiary | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
examples/next/pages/ui/components/ai/ai-conversation-theming-v2/amplify_outputs.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import amplifyOutputs from '@environments/ai/gen2/amplify_outputs'; | ||
| export default amplifyOutputs; |
124 changes: 124 additions & 0 deletions
124
examples/next/pages/ui/components/ai/ai-conversation-theming-v2/index.page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { Amplify } from 'aws-amplify'; | ||
| import { generateClient } from 'aws-amplify/api'; | ||
| import { | ||
| View, | ||
| createTheme, | ||
| defaultDarkModeOverride, | ||
| withAuthenticator, | ||
| ColorMode, | ||
| Button, | ||
| } from '@aws-amplify/ui-react'; | ||
| import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai'; | ||
| import { ThemeStyle, defineComponentTheme } from '@aws-amplify/ui-react/server'; | ||
| import '@aws-amplify/ui-react/styles.css'; | ||
|
|
||
| import outputs from './amplify_outputs'; | ||
| import type { Schema } from '@environments/ai/gen2/amplify/data/resource'; | ||
|
|
||
| const client = generateClient<Schema>({ authMode: 'userPool' }); | ||
| const { useAIConversation } = createAIHooks(client); | ||
|
|
||
| Amplify.configure(outputs); | ||
|
|
||
| const conversationTheme = defineComponentTheme({ | ||
| name: 'ai-conversation', | ||
| theme(tokens) { | ||
| return { | ||
| _element: { | ||
| message: { | ||
| borderRadius: tokens.radii.large, | ||
| padding: tokens.space.small, | ||
| borderWidth: tokens.borderWidths.small, | ||
| borderStyle: 'solid', | ||
| borderColor: tokens.colors.border.primary, | ||
| boxShadow: `${tokens.shadows.medium}`, | ||
| }, | ||
| message__list: { | ||
| gap: tokens.space.large, | ||
| }, | ||
| form: { | ||
| borderRadius: tokens.radii.large, | ||
| padding: tokens.space.small, | ||
| borderWidth: tokens.borderWidths.small, | ||
| borderStyle: 'solid', | ||
| borderColor: tokens.colors.border.primary, | ||
| boxShadow: `${tokens.shadows.medium}`, | ||
| }, | ||
| }, | ||
| }; | ||
| }, | ||
| overrides: [ | ||
| { | ||
| colorMode: 'dark', | ||
| theme(tokens) { | ||
| return { | ||
| _element: { | ||
| form: { | ||
| backgroundColor: tokens.colors.background.secondary, | ||
| }, | ||
| }, | ||
| }; | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| const theme = createTheme({ | ||
| name: 'ai-conversation-theme', | ||
| components: [conversationTheme], | ||
| overrides: [defaultDarkModeOverride], | ||
| }); | ||
|
|
||
| function Chat() { | ||
| const [ | ||
| { | ||
| data: { messages }, | ||
| isLoading, | ||
| }, | ||
| sendMessage, | ||
| ] = useAIConversation('pirateChat'); | ||
| return ( | ||
| <> | ||
| <AIConversation | ||
| messages={messages} | ||
| handleSendMessage={sendMessage} | ||
| isLoading={isLoading} | ||
| /> | ||
| <AIConversation | ||
| messages={messages} | ||
| handleSendMessage={sendMessage} | ||
| isLoading={isLoading} | ||
| variant="bubble" | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function AIConversationThemePage() { | ||
| const [colorMode, setColorMode] = React.useState<ColorMode>('light'); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| onClick={() => { | ||
| setColorMode((prevColorMode) => | ||
| prevColorMode === 'dark' ? 'light' : 'dark' | ||
| ); | ||
| }} | ||
| > | ||
| {colorMode} | ||
| </Button> | ||
| <View | ||
| backgroundColor="background.primary" | ||
| {...theme.containerProps({ colorMode })} | ||
| > | ||
| <Chat /> | ||
| </View> | ||
| <ThemeStyle theme={theme} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default withAuthenticator(AIConversationThemePage); |
2 changes: 2 additions & 0 deletions
2
examples/next/pages/ui/components/ai/ai-conversation-theming/amplify_outputs.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import amplifyOutputs from '@environments/ai/gen2/amplify_outputs'; | ||
| export default amplifyOutputs; |
81 changes: 81 additions & 0 deletions
81
examples/next/pages/ui/components/ai/ai-conversation-theming/index.page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import * as React from 'react'; | ||
| import { Amplify } from 'aws-amplify'; | ||
| import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai'; | ||
| import { ThemeStyle } from '@aws-amplify/ui-react/server'; | ||
| import { generateClient } from 'aws-amplify/api'; | ||
| import '@aws-amplify/ui-react/styles.css'; | ||
| import outputs from './amplify_outputs'; | ||
| import type { Schema } from '@environments/ai/gen2/amplify/data/resource'; | ||
| import { | ||
| View, | ||
| createTheme, | ||
| defaultDarkModeOverride, | ||
| withAuthenticator, | ||
| } from '@aws-amplify/ui-react'; | ||
| import { ColorMode } from '@aws-amplify/ui-react'; | ||
| import { Button } from '@aws-amplify/ui-react'; | ||
|
|
||
| const client = generateClient<Schema>({ authMode: 'userPool' }); | ||
| const { useAIConversation } = createAIHooks(client); | ||
|
|
||
| Amplify.configure(outputs); | ||
|
|
||
| const theme = createTheme({ | ||
| name: 'ai-conversation-theme', | ||
| tokens: { | ||
| components: { | ||
| aiConversation: { | ||
| message: { | ||
| backgroundColor: { value: '#f5f5f5' }, | ||
| gap: '{space.small}', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| overrides: [defaultDarkModeOverride], | ||
| }); | ||
|
|
||
| function AIConversationThemePage() { | ||
| const [colorMode, setColorMode] = React.useState<ColorMode>('light'); | ||
| const [ | ||
| { | ||
| data: { messages }, | ||
| isLoading, | ||
| }, | ||
| sendMessage, | ||
| ] = useAIConversation('pirateChat'); | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| onClick={() => { | ||
| setColorMode((prevColorMode) => | ||
| prevColorMode === 'dark' ? 'light' : 'dark' | ||
| ); | ||
| }} | ||
| > | ||
| {colorMode} | ||
| </Button> | ||
| <View | ||
| backgroundColor="background.primary" | ||
| {...theme.containerProps({ colorMode })} | ||
| > | ||
| <AIConversation | ||
| messages={messages} | ||
| handleSendMessage={sendMessage} | ||
| isLoading={isLoading} | ||
| allowAttachments | ||
| /> | ||
| <AIConversation | ||
| messages={messages} | ||
| handleSendMessage={sendMessage} | ||
| isLoading={isLoading} | ||
| variant="bubble" | ||
| /> | ||
| </View> | ||
| <ThemeStyle theme={theme} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default withAuthenticator(AIConversationThemePage); |
Oops, something went wrong.