@nuskin/chat-bot/src/components/chatBot/ChatBot.stories.js

React Chat Bot component for GenAI interaction with Amazon Bedrock

// import { ChatBot } from './ChatBot'
// import './chatbot.css'
import { ChatBotUI } from '../../../dist/esm/chat-bot'
import '../../../dist/esm/style.css'
import config from '../../../config/config'

export default {
    title: 'Example/ChatBot',
    component: ChatBotUI.ChatBot,
    parameters: {
        layout: 'centered'
    },
    tags: ['autodocs'],
    argTypes: {
        // Add any props that should have controls in Storybook
    }
}

export const Default = {
    args: {
        title: 'Product Chat',
        questions: ['What shampoos are available?', 'What facial cleansers help with acne?'],
        agentId: 'YYGSGBLL1F',
        agentAliasId: '5JPHGHYFON',
        apiEndpoint: config.API_URL,
        apiHeaders: config.HEADERS
    }
}

export const DeveloperPortalQuestions = {
    args: {
        title: 'Developer Portal Questions',
        questions: ['How many APIs do we have?', 'How many Lambdas do we have?', 'How do I get sso access?', 'How do I generate auth tokens?'],
        agentId: '3ATANTBGDI',
        agentAliasId: 'CFFFVBNZPQ',
        apiEndpoint: config.API_URL,
        apiHeaders: config.HEADERS
    }
}

export const HideTitleBar = {
    args: {
        title: 'HiddenTitleBar',
        questions: ['What lotions are good for moist environments?', 'What lotions are available for oily skin?', 'What cleansers are available for dry skin?'],
        agentId: 'YYGSGBLL1F',
        agentAliasId: '5JPHGHYFON',
        hideTitleBar: true,
        apiEndpoint: config.API_URL,
        apiHeaders: config.HEADERS
    }
}

export const multipleAgents = {
    args: {
        title: 'Multiple Agent Options',
        agents: [
            {
                agentId: '4LODSCLV6J',
                agentAliasId: 'TQTFKYVNZ0',
                value: 'haiku',
                label: 'Haiku'
            },
            {
                agentId: '4LODSCLV6J',
                agentAliasId: 'CWUPLRIFIY',
                value: 'sonnet',
                label: 'Sonnet'
            }
        ],
        questions: ['What is the capital of France?', 'What is GenAI?', 'What is Amazon Bedrock?', 'How can I get started using Amazon Bedrock?'],
        apiEndpoint: config.API_URL,
        apiHeaders: config.HEADERS
    }
}