-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add assistant documentation, overview and kpi
- Loading branch information
Fernando Pauer
committed
Nov 22, 2024
1 parent
25c456c
commit e801d28
Showing
8 changed files
with
304 additions
and
2 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 |
|---|---|---|
|
|
@@ -16,6 +16,7 @@ const preview = { | |
| 'Overview', | ||
| 'Data sources', | ||
| 'Components', | ||
| 'Assistant', | ||
| 'Core', | ||
| 'React hooks', | ||
| ], | ||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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,26 @@ | ||
| import { Meta, IconGallery, IconItem } from '@storybook/blocks'; | ||
| import { AssistantComponentsCards } from "../../common/cards"; | ||
|
|
||
| <Meta title="Assistant/Overview" /> | ||
|
|
||
| # AWS IoT SiteWise Assistant | ||
|
|
||
| AWS IoT SiteWise Assistant, a generative AI-powered assistant in AWS IoT SiteWise that allows industrial users to gain insights, | ||
| solve problems, and take actions from their operational data and other data sources intuitively using natural language queries. | ||
|
|
||
| ## Get Started | ||
| Please check our user guide about how to setup and enable the AWS IoT Sitewise assistant: [https://docs.aws.amazon.com/iot-sitewise/latest/userguide/assistant-get-started.html](https://docs.aws.amazon.com/iot-sitewise/latest/userguide/assistant-get-started.html) | ||
|
|
||
| ## Features | ||
|
|
||
| For more details, please read [Transforming industrial decision making with AWS IoT SiteWise Assistant](https://aws.amazon.com/blogs/industries/transforming-industrial-decision-making-with-aws-iot-sitewise-assistant/) | ||
|
|
||
| - Summarization: Cut through the noise | ||
| - Deep-dive: Uncover Insights with Q&A | ||
| - Analysis: Accelerating Decision-Making | ||
| - Seamless Integration and Accessibility | ||
| - Security and Privacy | ||
|
|
||
| ## AI-aware app kit components | ||
|
|
||
| <AssistantComponentsCards /> |
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,82 @@ | ||
| import { Canvas, Meta, Story, Source, Markdown } from '@storybook/blocks'; | ||
| import * as KPIStories from './KPI.stories'; | ||
|
|
||
| <Meta of={KPIStories} /> | ||
|
|
||
| # KPI | ||
|
|
||
| The Key Performance Indicator (KPI) component provides a compact representation when you need an overview of your asset properties. | ||
| This overview provides critical insights into the overall performance of your devices, equipment, and processes. | ||
| The KPI component lets you can interact with IoT data from one or more data sources. | ||
|
|
||
| ## Assistant | ||
| ##### (object, optional) | ||
| This specifies settings to enable the IoT Sitewise AI assistant within the component. Please refer to the [AWS documentation for more details about IoT Sitewise AI assistant](https://aws.amazon.com/iot-sitewise/features/). | ||
|
|
||
| <Markdown> | ||
| {` | ||
| | Name | Type | Default | Description | | ||
| | ------------ | ------------ | -------------- | ------------------- | | ||
| | \`client\` | object, required | - | Specifies an instantiated assistant client \`IoTSitewiseAssistantClient\`, the assistant client is responsible for interfacing with the Assistant API.| | ||
| | \`conversationId\` | string, required | - | Defines a conversation ID to be used as unique identifier for conversations with the assistant, the conversation ID can be the same for multiple components or unique, depending on use cases. | | ||
| | \`componentId\` | string, required | - | Each component **must define an unique ID** which will be used by the assistant to manage state and assistant results. | | ||
| | \`target\` | object, required | - | Defines the target for the assistant actions, the target options are \`dashboard\` and \`widget\`. For target \`dashboard\` all assistant results will be broadcasted to the Dashboard component, for target \`widget\` the assistant results will be display next to the component. | | ||
| | \`enabled\` | boolean, optional | true | Allows to disable or enable the assistant at the component level. | | ||
| | \`onAction\` | event, optional | - | Allows to pass a callback function to listen for any assistant action within the component. | | ||
| `} | ||
| </Markdown> | ||
|
|
||
| <Canvas sourceState="none" story={{ height : '550px' }} of={KPIStories.Assistant} /> | ||
| <Source dark="true" code={`import React, { useEffect } from 'react'; | ||
| import { KPI, useAssistant } from '@iot-app-kit/react-components'; | ||
| import { IoTSitewiseAssistantClient } from '@iot-app-kit/core-util'; | ||
| export const KPIWithAssistant = () => { | ||
| const client = new IoTSitewiseAssistantClient({ | ||
| iotSiteWiseClient | ||
| }); | ||
| const { generateSummary } = useAssistant({ | ||
| assistantClient: client, | ||
| }); | ||
| useEffect(() => { | ||
| generateSummary({ | ||
| componentId: 'my-kpi-component-id', | ||
| conversationId: 'my-conversation-id', | ||
| target: 'widget', | ||
| utterance: 'generate a summary and return the response in markdown format.', | ||
| }); | ||
| }, []); | ||
| return ( | ||
| <div style={{ width: '300px', height: '200px', border: '1px solid lightgrey' }}> | ||
| <KPI | ||
| query: sitewise, | ||
| settings: { | ||
| showUnit: true, | ||
| showName: true, | ||
| showTimestamp: true, | ||
| showAggregationAndResolution: true, | ||
| fontSize: 30, | ||
| secondaryFontSize: 12, | ||
| backgroundColor: '#ffffff', | ||
| } | ||
| assistant={{ | ||
| client, | ||
| componentId: 'my-kpi-component-id', | ||
| conversationId: 'my-conversation-id', | ||
| target: 'widget', | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| };`} /> | ||
|
|
||
| ## Alarms | ||
|
|
||
| <Canvas sourceState='hidden' of={KPIStories.Alarm} /> | ||
|
|
||
| When you add an IoT SiteWise alarm to the KPI the alarm's state will be displayed as a label, and the alarm's threshold will be added. | ||
|
|
||
| An IoT SiteWise alarm is triggered based on a SiteWise input property. The associated input property data will automatically be displayed on the KPI as well. |
104 changes: 104 additions & 0 deletions
104
packages/doc-site/stories/assistant/components/KPI.stories.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,104 @@ | ||
| import { useEffect } from 'react'; | ||
| import { KPI, useAssistant } from '@iot-app-kit/react-components'; | ||
| import { mockAlarmData, mockSinWaveData } from '@iot-app-kit/testing-util'; | ||
| import { IoTSitewiseAssistantClient } from '@iot-app-kit/core-util'; | ||
| import { type Meta, type StoryObj } from '@storybook/react'; | ||
| import { MockInvokeAssistant } from '../../mockAssistantAPI'; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction | ||
| const meta: Meta<typeof KPI> = { | ||
| title: 'Assistant/Components/KPI', | ||
| component: KPI, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof KPI>; | ||
|
|
||
| const componentId1 = 'a1cdf292-8a1c-4809-9c9a-3485d88c447b'; | ||
| const componentId2 = 'a2cdf292-8a1c-4809-9c9a-3485d88c447b'; | ||
| const client = new IoTSitewiseAssistantClient({ | ||
| iotSiteWiseClient: { | ||
| invokeAssistant: MockInvokeAssistant, | ||
| }, | ||
| defaultContext: '', | ||
| }); | ||
|
|
||
| export const Assistant: Story = { | ||
| render: (props) => { | ||
| const { generateSummary } = useAssistant({ | ||
| assistantClient: client, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| generateSummary({ | ||
| componentId: componentId1, | ||
| conversationId: crypto.randomUUID(), | ||
| target: 'widget', | ||
| utterance: | ||
| 'generate a summary and return the response in markdown format.', | ||
| }); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| width: '300px', | ||
| height: '200px', | ||
| border: '1px solid lightgrey', | ||
| }} | ||
| > | ||
| <KPI | ||
| {...props} | ||
| assistant={{ | ||
| client, | ||
| componentId: componentId1, | ||
| conversationId: 'mockConversationId', | ||
| target: 'widget', | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }, | ||
| args: { | ||
| query: mockSinWaveData('5s'), | ||
| settings: { | ||
| showUnit: true, | ||
| showName: true, | ||
| showTimestamp: true, | ||
| showAggregationAndResolution: true, | ||
| fontSize: 30, | ||
| secondaryFontSize: 12, | ||
| backgroundColor: '#ffffff', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Alarm: Story = { | ||
| render: (props) => ( | ||
| <div | ||
| style={{ width: '300px', height: '200px', border: '1px solid lightgrey' }} | ||
| > | ||
| <KPI | ||
| {...props} | ||
| assistant={{ | ||
| client, | ||
| componentId: componentId2, | ||
| conversationId: 'mockConversationId', | ||
| target: 'widget', | ||
| }} | ||
| /> | ||
| </div> | ||
| ), | ||
| args: { | ||
| query: mockAlarmData(), | ||
| settings: { | ||
| showUnit: true, | ||
| showName: true, | ||
| showTimestamp: true, | ||
| showAggregationAndResolution: true, | ||
| fontSize: 30, | ||
| secondaryFontSize: 12, | ||
| }, | ||
| }, | ||
| }; |
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
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