diff --git a/packages/doc-site/.storybook/preview.js b/packages/doc-site/.storybook/preview.js index 8850c322d..6086a58a6 100644 --- a/packages/doc-site/.storybook/preview.js +++ b/packages/doc-site/.storybook/preview.js @@ -16,6 +16,7 @@ const preview = { 'Overview', 'Data sources', 'Components', + 'Assistant', 'Core', 'React hooks', ], diff --git a/packages/doc-site/assets/ChatbotPreview.png b/packages/doc-site/assets/ChatbotPreview.png new file mode 100644 index 000000000..e7b09c876 Binary files /dev/null and b/packages/doc-site/assets/ChatbotPreview.png differ diff --git a/packages/doc-site/common/cards.jsx b/packages/doc-site/common/cards.jsx index 7fcb615a4..569f08d3a 100644 --- a/packages/doc-site/common/cards.jsx +++ b/packages/doc-site/common/cards.jsx @@ -156,3 +156,92 @@ export const IntroductionSelectedDemosCards = () => { /> ); } + +export const AssistantComponentsCards = () => { + return ( + `select ${t.name}`, + selectionGroupLabel: "Item selection" + }} + cardDefinition={{ + header: item => item.title, + sections: [ + { + id: "name", + content: item => ( + + {item.image ? placeholder : null + } + + ) + }, + { + id: "description", + content: item => ( + <> + {item.description}  + Learn more + + ) + } + ] + }} + cardsPerRow={[ + { cards: 1 }, + { minWidth: 500, cards: 3 } + ]} + items={[ + { + name: "Dashboard", + image: "/iot-app-kit/assets/DashboardPreview.jpg", + title: "Dashboard", + link: "/iot-app-kit/?path=/docs/assistant-components-dashboard---docs", + description: "Dashboard component allows you to easily create, modify, view, and organize widgets for a tailored experience to monitor your IoT data." + }, + { + name: "KPI", + image: "/iot-app-kit/assets/KPIPreview.png", + title: "KPI", + link: "/iot-app-kit/?path=/docs/assistant-components-kpi--docs", + description: "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." + }, + { + name: "Gauge", + image: "/iot-app-kit/assets/GaugePreview.png", + title: "Gauge", + link: "/iot-app-kit/?path=/docs/assistant-components-gauge--docs", + description: "The Gauge component provides a compact representation of an overview of your asset properties. Visualize critical insights into the overall performance of your devices, equipment, or processes." + }, + { + name: "Chart", + image: "/iot-app-kit/assets/ChartPreview.png", + title: "Chart", + link: "/iot-app-kit/?path=/docs/assistant-components-chart--docs", + description: "The chart component is a way to visualize and navigate time series data from one or more data sources.Chart supports a rich set of features including trend cursors, thresholds, high performance live-streaming and smooth syncing across other IoT App Kit components." + }, + { + name: "Chatbot", + image: "/iot-app-kit/assets/ChatbotPreview.png", + title: "Chatbot", + link: "/iot-app-kit/?path=/docs/assistant-components-chatbot--docs", + description: "The Assistant Chatbot component provides an interactive chat interface for conversational dive-deeps in IoT applications." + }, + { + name: "Table", + title: "Table", + link: "/iot-app-kit/?path=/docs/assistant-components-table--docs", + description: "Presents data in a two-dimensional table format, arranged in columns and rows in a rectangular form." + }, + ]} + loadingText="Loading resources" + empty={`No resources`} + /> + ); +} diff --git a/packages/doc-site/stories/assistant/Overview.mdx b/packages/doc-site/stories/assistant/Overview.mdx new file mode 100644 index 000000000..43eb4a47e --- /dev/null +++ b/packages/doc-site/stories/assistant/Overview.mdx @@ -0,0 +1,26 @@ +import { Meta, IconGallery, IconItem } from '@storybook/blocks'; +import { AssistantComponentsCards } from "../../common/cards"; + + + +# 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 + + \ No newline at end of file diff --git a/packages/doc-site/stories/assistant/components/Chart.mdx b/packages/doc-site/stories/assistant/components/Chart.mdx new file mode 100644 index 000000000..2f2dfccd7 --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Chart.mdx @@ -0,0 +1,86 @@ +import { Canvas, Meta, Story, Source, Markdown, IconItem } from '@storybook/blocks'; + +import * as ChartStories from './Chart.stories'; +import { Icon } from '@cloudscape-design/components'; + + + +# Chart + +The chart component is a way to visualize and navigate time series data from one or more [data sources](/docs/core-datasources--docs). + +Chart supports a rich set of features including trend cursors, thresholds, high performance live-streaming and smooth syncing across other IoT App Kit components. + +This component can be used to draw both line (step-up, step-down, step-mid etc.) and scatter charts. + +## 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/). + + +{` +| 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. | +`} + + + + { + const client = new IoTSitewiseAssistantClient({ + iotSiteWiseClient + }); + + const { generateSummary } = useAssistant({ + assistantClient: client, + }); + + return ( +
+ Please, select an item in the table below: + { + if (event.type === 'selection') { + generateSummary({ + componentId, + conversationId: crypto.randomUUID(), + target: 'widget', + utterance: + 'generate a summary and return the response in markdown format.', + }); + } + } + }} + /> +
+ ); +};`} /> diff --git a/packages/doc-site/stories/assistant/components/Chart.stories.tsx b/packages/doc-site/stories/assistant/components/Chart.stories.tsx new file mode 100644 index 000000000..1d72be117 --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Chart.stories.tsx @@ -0,0 +1,77 @@ +import { Chart, useAssistant } from '@iot-app-kit/react-components'; +import { + 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 = { + title: 'Assistant/Components/Chart', + component: Chart, +}; + +export default meta; + +type Story = StoryObj; + +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, clearAll } = useAssistant({ + assistantClient: client, + }); + + return ( +
+ Please, select an item in the table below: + { + if (event.type === 'selection') { + clearAll(); + generateSummary({ + componentId: componentId1, + conversationId: crypto.randomUUID(), + target: 'widget', + utterance: + 'generate a summary and return the response in markdown format.', + }); + } + } + }} + /> +
+ ) + }, + args: { + queries: [mockSinWaveData()], + viewport: { duration: '30s' }, + }, +}; diff --git a/packages/doc-site/stories/assistant/components/Chatbot.mdx b/packages/doc-site/stories/assistant/components/Chatbot.mdx new file mode 100644 index 000000000..d09933867 --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Chatbot.mdx @@ -0,0 +1,83 @@ +import { Canvas, Meta, Story, Source, Markdown } from '@storybook/blocks'; +import * as ChatbotStories from './Chatbot.stories'; + +# Chatbot + +An AI-powered chatbot component powered by [IoT Sitewise Assistant](https://docs.aws.amazon.com/iot-sitewise/latest/userguide/assistant-get-started.html) pre-trained on large volumes of industrial data and using a large language model (LLM). + +The chatbot allows users like plant managers, quality engineers, and maintenance technicians to gain insights, dive deep on question to solve problems, and get directions how to act directly from their operational and enterprise data. + + + + + +## Chatbot Properties + +The Chatbot component contains the following customizable properties. + +#### messages +##### (array, required) +This specifies a list of messages to visualize in the chatbot. The messages can be harded code or retrieved using useAssistant hooks, learn more about [useAssistant hook](/docs/hooks-useassistant--docs). + +Array of chat messages to display + +Example for messages data. + +`} /> + +#### height +##### (number, required) +This defines a fixed height for the Chatbot. Default behavior is to use 100% of the avaliable height of the parent component. + +#### visible +##### (boolean, optional) +This defines the visible state of the chatbot, this can be used to display or not the chatbot depending on the use case. Default to `true`. + +#### header +##### (object, optional) +This specifies the header settings for the Chatbot component. Default value is `undefined`. + +#### Chatbot Header props: + +{` +| Name | Type | Default | Description | +| ------------ | ------------ | -------------- | ------------------- | +| \`headerText\` | string, required | true | The header title of the chatbot. | +| \`showResetButton\` | boolean, optional | false | Displays the reset button or not. | +| \`showCloseButton\` | boolean, optional | false | Displays the close button or not. | +| \`closeIconName\` | string, optional | 'close' | The icon name used to display the close button. | +| \`onReset\` | function, optional | - | Callback function to listen when customer clicks on the reset button. | +| \`onClose\` | function, optional | - | Callback function to listen when customer clicks on the close button. | +`} + + +#### onSubmit +##### (function, optional) +Callback function to listen when customer clicks on the send button. Default value is `undefined`. + +## More Examples + +### Loading + + +### Error + diff --git a/packages/doc-site/stories/assistant/components/Chatbot.stories.tsx b/packages/doc-site/stories/assistant/components/Chatbot.stories.tsx new file mode 100644 index 000000000..60100dee9 --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Chatbot.stories.tsx @@ -0,0 +1,159 @@ +/* eslint-disable */ +// @ts-nocheck +import { useEffect } from 'react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { AssistantChatbot, useAssistant, MessageType } from '@iot-app-kit/react-components'; +import { IoTSitewiseAssistantClient } from '@iot-app-kit/core-util'; +import '@cloudscape-design/global-styles/index.css'; +import { MockInvokeAssistant } from '../../mockAssistantAPI'; + +export default { + title: 'Assistant/Components/Chatbot', + component: AssistantChatbot, + argTypes: { + accessKeyId: { control: { type: 'string' } }, + secretAccessKey: { control: { type: 'string' } }, + sessionToken: { control: { type: 'string' } }, + containerWidth: { control: { type: 'number' }, defaultValue: 200 }, + containerHeight: { control: { type: 'number' }, defaultValue: 200 }, + }, + parameters: { + layout: 'fullscreen', + }, +} as ComponentMeta; + +const conversationId = crypto.randomUUID(); +const client = new IoTSitewiseAssistantClient({ + iotSiteWiseClient: { + invokeAssistant: MockInvokeAssistant, + }, + defaultContext: '', +}); + +export const Standard: ComponentStory< + typeof AssistantChatbot +> = () => { + + const { messages, invokeAssistant, clearAll, setMessages } = useAssistant({ + assistantClient: client, + }); + + useEffect(() => { + clearAll(); + setMessages([ + { + content: + 'Who are you ?', + sender: 'user', + type: MessageType.TEXT, + id: crypto.randomUUID(), + loading: false, + }, + { + content: + 'Hello, I am your AWS IoT SiteWise Assistant. Please ask me anything about your dashboard.', + sender: 'assistant', + type: MessageType.TEXT, + id: crypto.randomUUID(), + loading: false, + }, + ]); + }, []); + + const handleSubmit = (utterance: string) => { + invokeAssistant({ componentId: '', conversationId, utterance }); + }; + + return ( +
+ {}} + header={{ + headerText: 'IoT Sitewise Assistant', + showCloseButton: true, + showResetButton: true, + onReset: () => clearAll(), + onClose: () => {}, + }} + /> +
+ ); +}; + +export const LoadingState: ComponentStory< + typeof AssistantChatbot +> = () => { + + const messages = [ + { + content: + 'Processing assistant response, please wait..', + sender: 'assistant', + type: MessageType.TEXT, + id: crypto.randomUUID(), + loading: true, + }, + { + content: + 'Processing assistant response, please wait...processing assistant response, please wait...processing assistant response, please wait...', + sender: 'assistant', + type: MessageType.TEXT, + id: crypto.randomUUID(), + loading: true, + }, + ]; + + return ( +
+ {}} + onClose={() => {}} + /> +
+ ); +}; + +export const ErrorState: ComponentStory< + typeof AssistantChatbot +> = () => { + + const messages = [ + { + content: + 'Processing assistant response, please wait..', + sender: 'assistant', + type: MessageType.TEXT, + id: crypto.randomUUID(), + loading: true, + }, + { + content: 'You do not have the required permissions to use the Sitewise Assistant. Please contact your administrator to request access.', + sender: 'assistant', + type: MessageType.ERROR, + id: crypto.randomUUID(), + loading: false, + payload: { + accessDeniedException: { + name: 'accessDeniedException', + message: 'You do not have the required permissions to use the Sitewise Assistant. Please contact your administrator to request access.', + } + } + } + ]; + + return ( +
+ {}} + onClose={() => {}} + /> +
+ ); +}; \ No newline at end of file diff --git a/packages/doc-site/stories/assistant/components/Gauge.mdx b/packages/doc-site/stories/assistant/components/Gauge.mdx new file mode 100644 index 000000000..54217b99b --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Gauge.mdx @@ -0,0 +1,73 @@ +import { Canvas, Meta, Story, Source, Markdown } from '@storybook/blocks'; +import * as GaugeStories from './Gauge.stories'; + +# Gauge + +The Gauge component provides a compact representation of an overview of your asset properties. +Visualize critical insights into the overall performance of your devices, equipment, or processes. +Interact with IoT data from one or more data sources with Gauge. + + + +## 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/). + + +{` +| 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. | +`} + + + { + 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 ( + + ); +};`} /> diff --git a/packages/doc-site/stories/assistant/components/Gauge.stories.tsx b/packages/doc-site/stories/assistant/components/Gauge.stories.tsx new file mode 100644 index 000000000..56eab2959 --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Gauge.stories.tsx @@ -0,0 +1,81 @@ +import { useEffect } from 'react'; +// eslint-disable-next-line import/default +import { Gauge, useAssistant} from '@iot-app-kit/react-components'; +import { + mockSinWaveDataWithQuality, +} from '@iot-app-kit/testing-util'; +import { type Meta, type StoryObj } from '@storybook/react'; +import { IoTSitewiseAssistantClient } from '@iot-app-kit/core-util'; +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 = { + title: 'Assistant/Components/Gauge', + component: Gauge, +}; + +export default meta; + +type Story = StoryObj; + +const componentId1 = 'a1cdf292-8a1c-4809-9c9a-3485d88c447b'; +const client = new IoTSitewiseAssistantClient({ + iotSiteWiseClient: { + invokeAssistant: MockInvokeAssistant, + }, + defaultContext: '', +}); + +export const Assistant: Story = { + render: (props) => { + const { generateSummary, clearAll } = useAssistant({ + assistantClient: client, + }); + + useEffect(() => { + clearAll(); + generateSummary({ + componentId: componentId1, + conversationId: crypto.randomUUID(), + target: 'widget', + utterance: + 'generate a summary and return the response in markdown format.', + }); + }, []); + + return ( +
+ +
+ ); + }, + args: { + query: mockSinWaveDataWithQuality({ frequency: '5s', positiveOnly: true }), + settings: { + gaugeThickness: 30, + showUnit: true, + showName: false, + fontSize: 40, + labelFontSize: 16, + unitFontSize: 16, + yMin: -100, + yMax: 100, + }, + }, +}; diff --git a/packages/doc-site/stories/assistant/components/KPI.mdx b/packages/doc-site/stories/assistant/components/KPI.mdx new file mode 100644 index 000000000..f66bf4390 --- /dev/null +++ b/packages/doc-site/stories/assistant/components/KPI.mdx @@ -0,0 +1,83 @@ +import { Canvas, Meta, Story, Source, Markdown } from '@storybook/blocks'; +import * as KPIStories from './KPI.stories'; + + + +# 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/). + + +{` +| 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. | +`} + + + + { + 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 ( +
+ +
+ ); +};`} /> + +## Alarms + + + +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. diff --git a/packages/doc-site/stories/assistant/components/KPI.stories.tsx b/packages/doc-site/stories/assistant/components/KPI.stories.tsx new file mode 100644 index 000000000..3c83e7a0e --- /dev/null +++ b/packages/doc-site/stories/assistant/components/KPI.stories.tsx @@ -0,0 +1,125 @@ +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 = { + title: 'Assistant/Components/KPI', + component: KPI, +}; + +export default meta; + +type Story = StoryObj; + +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, clearAll } = useAssistant({ + assistantClient: client, + }); + + useEffect(() => { + clearAll(); + generateSummary({ + componentId: componentId1, + conversationId: crypto.randomUUID(), + target: 'widget', + utterance: + 'generate a summary and return the response in markdown format.', + }); + }, []); + + return ( +
+ +
+ ); + }, + 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) => { + const { generateSummary, getContextByComponent } = useAssistant({ + assistantClient: client, + }); + + return ( +
+ { + if (event.type === 'summarize') { + generateSummary({ + componentId: event.sourceComponentId, + conversationId: crypto.randomUUID(), + target: 'widget', + utterance: + 'generate a summary and return the response in markdown format.', + context: getContextByComponent(event.sourceComponentId) + }); + } + } + }} + /> +
+ ); + }, + args: { + query: mockAlarmData(), + settings: { + showUnit: true, + showName: true, + showTimestamp: true, + showAggregationAndResolution: true, + fontSize: 30, + secondaryFontSize: 12, + }, + }, +}; \ No newline at end of file diff --git a/packages/doc-site/stories/assistant/components/Table.mdx b/packages/doc-site/stories/assistant/components/Table.mdx new file mode 100644 index 000000000..74396a2ea --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Table.mdx @@ -0,0 +1,26 @@ +import { Meta, Canvas, Source, Markdown } from '@storybook/blocks'; +import * as TableStories from './Table.stories'; + + + +# Table +The table component provides a compact form for viewing one or more data streams from one or more time series 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/). + + +{` +| 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. | +`} + + + diff --git a/packages/doc-site/stories/assistant/components/Table.stories.tsx b/packages/doc-site/stories/assistant/components/Table.stories.tsx new file mode 100644 index 000000000..2e177643e --- /dev/null +++ b/packages/doc-site/stories/assistant/components/Table.stories.tsx @@ -0,0 +1,106 @@ +import { useEffect } from 'react'; +import { Table, useAssistant, AssistantChatbot } from '@iot-app-kit/react-components'; +import Button from '@cloudscape-design/components/button'; +import { mockAlarmData } from '@iot-app-kit/testing-util'; +import { DATA_TYPE } from '@iot-app-kit/core'; +import { IoTSitewiseAssistantClient } from '@iot-app-kit/core-util'; +import { type Meta, type StoryObj } from '@storybook/react'; +import { MockInvokeAssistant } from '../../mockAssistantAPI'; + +const meta: Meta = { + title: 'Assistant/Components/Table', + component: Table, +}; + +export default meta; + +type Story = StoryObj; + +const VIEWPORT = { duration: '30s' }; + +const LATEST_VALUE = 123.2; +const DATA_STREAM = { + id: 'wind_speed', + name: 'wind_speed', + dataType: DATA_TYPE.NUMBER, + data: [{ x: new Date(2000, 0, 0).getTime(), y: LATEST_VALUE }], + resolution: 0, + unit: 'mph', + isLoading: false, +}; + +const componentId = 'a1cdf292-8a1c-4809-9c9a-3485d88c447b'; +const client = new IoTSitewiseAssistantClient({ + iotSiteWiseClient: { + invokeAssistant: MockInvokeAssistant, + }, + defaultContext: '', +}); + +export const Assistant: Story = { + render: (props) => { + const { messages, generateSummary, clearAll } = useAssistant({ + assistantClient: client, + }); + + useEffect(() => { + clearAll(); + }, []); + + return ( +
+ { + if (event.type === 'selection') { + console.log('onAction', event); + } + } + }} + /> +
+ +
+ {messages.length > 0 ? ( + {}} + /> + ): null } + + ) + }, + args: { + queries: [mockAlarmData()], + }, +}; diff --git a/packages/doc-site/stories/components/chart/Docs.mdx b/packages/doc-site/stories/components/chart/Docs.mdx index fe077b905..0f5190109 100644 --- a/packages/doc-site/stories/components/chart/Docs.mdx +++ b/packages/doc-site/stories/components/chart/Docs.mdx @@ -295,6 +295,25 @@ This specifies the color and position of the legend section. Default value is `u +#### 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/). + + +{` +| 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. | +`} + + +**Complete code examples and demos in [Assistant/Components/Chart](/iot-app-kit/?path=/docs/assistant-components-chart--docs) docs.** + ## Alarms diff --git a/packages/doc-site/stories/components/gauge/Docs.mdx b/packages/doc-site/stories/components/gauge/Docs.mdx index df5882fe7..fe328a9b5 100644 --- a/packages/doc-site/stories/components/gauge/Docs.mdx +++ b/packages/doc-site/stories/components/gauge/Docs.mdx @@ -178,7 +178,7 @@ It has the following style settings that are customizable: #### 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](#). +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/). {` @@ -193,49 +193,7 @@ This specifies settings to enable the IoT Sitewise AI assistant within the compo `} - { - 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 ( - - ); -};`} /> +**Complete code examples and demos in [Assistant/Components/Gauge](/iot-app-kit/?path=/docs/assistant-components-gauge--docs) docs.** ## Alarms diff --git a/packages/doc-site/stories/components/kpi/Docs.mdx b/packages/doc-site/stories/components/kpi/Docs.mdx index ed8dedc89..bbd86cf53 100644 --- a/packages/doc-site/stories/components/kpi/Docs.mdx +++ b/packages/doc-site/stories/components/kpi/Docs.mdx @@ -116,7 +116,7 @@ For more information, [Number.toFixed](https://developer.mozilla.org/en-US/docs/ #### 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](#). +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/). {` @@ -131,52 +131,7 @@ This specifies settings to enable the IoT Sitewise AI assistant within the compo `} - - { - 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 ( -
- -
- ); -};`} /> +**Complete code examples and demos in [Assistant/Components/KPI](/iot-app-kit/?path=/docs/assistant-components-kpi--docs) docs.** ## Alarms diff --git a/packages/doc-site/stories/components/kpi/Kpi.stories.tsx b/packages/doc-site/stories/components/kpi/Kpi.stories.tsx index b77504252..018ce6009 100644 --- a/packages/doc-site/stories/components/kpi/Kpi.stories.tsx +++ b/packages/doc-site/stories/components/kpi/Kpi.stories.tsx @@ -1,5 +1,4 @@ -import { useEffect } from 'react'; -import { KPI, useAssistant } from '@iot-app-kit/react-components'; +import { KPI } from '@iot-app-kit/react-components'; import { mockSinWaveData, mockSinWaveDataWithQuality, @@ -8,9 +7,7 @@ import { mockTimeSeriesDataQueryWithError, mockTimeSeriesDataQueryLoading, } 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 = { @@ -155,61 +152,3 @@ export const SignificantDigits: Story = { significantDigits: 2, }, }; - -const componentId = 'a8cdf292-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, - conversationId: crypto.randomUUID(), - target: 'widget', - utterance: - 'generate a summary and return the response in markdown format.', - }); - }, []); - - return ( -
- -
- ); - }, - args: { - query: mockSinWaveData('5s'), - settings: { - showUnit: true, - showName: true, - showTimestamp: true, - showAggregationAndResolution: true, - fontSize: 30, - secondaryFontSize: 12, - backgroundColor: '#ffffff', - }, - }, -}; diff --git a/packages/doc-site/stories/components/table/Docs.mdx b/packages/doc-site/stories/components/table/Docs.mdx index a8ebefa72..c9051b609 100644 --- a/packages/doc-site/stories/components/table/Docs.mdx +++ b/packages/doc-site/stories/components/table/Docs.mdx @@ -269,6 +269,25 @@ If set to true, the pagination will enable for the table. Use it together with ` ##### (number, optional) The number of items it should display in a table page. Available only if you specify the `paginationEnabled` property as true. +#### 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/). + + +{` +| 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. | +`} + + +**Complete code examples and demos in [Assistant/Components/Table](/iot-app-kit/?path=/docs/assistant-components-table--docs) docs.** + ## Alarms