@gameon/web/web-components/bot-client/bot-client.stories.ts

Chat clients for web

import { Story, Meta } from '@storybook/web-components';
import { html } from 'lit';

import { DisplayMode, Environment, OnChatBotClient } from './bot-client';
import bg from '../../.storybook/assets/bg.png';
import './bot-client';

const DEFAULT_TEST_CLIENT_ID = '201faad7-83b0-478d-ba19-019b5bfdd9ea'; // Florence bot

export default {
  title: 'Bot client',
  argTypes: {
    chatCloseImageUrl: { control: 'text' },
    chatOpenImageUrl: { control: 'text' },
    clientId: { control: 'text' },
    debug: { control: 'boolean' },
    displayMode: {
      control: {
        type: 'select',
        options: [
          DisplayMode.FULL_SCREEN,
          DisplayMode.WIDGET,
          DisplayMode.WIDGET_WITHOUT_BUTTON,
        ],
      },
    },
    env: {
      control: {
        type: 'select',
        options: [
          Environment.LOCAL,
          Environment.STAGING,
          Environment.PRODUCTION,
        ],
      },
    },
    initialPrompt: { control: 'text' },
    persistMessagesAcrossSessions: { control: 'boolean' },
    shouldAutoOpen: { control: 'boolean' },
    shouldAutoOpenMobile: { control: 'boolean' },
  },
} as Meta;

const Template: Story<Partial<OnChatBotClient>> = ({
  chatCloseImageUrl,
  chatOpenImageUrl,
  clientId,
  debug,
  displayMode,
  env,
  initialPrompt,
  persistMessagesAcrossSessions,
  shouldAutoOpen,
  shouldAutoOpenMobile,
}) => html`
  <style>
    html,
    body,
    #root,
    #root-inner,
    on-chat-bot-client {
      height: 100%;
      margin: 0;
    }
  </style>
  <on-chat-bot-client
    .chatCloseImageUrl="${chatCloseImageUrl}"
    .chatOpenImageUrl="${chatOpenImageUrl}"
    .clientId="${clientId ?? ''}"
    .debug="${debug ?? false}"
    .displayMode="${displayMode ?? DisplayMode.FULL_SCREEN}"
    .env="${env ?? Environment.STAGING}"
    .initialPrompt="${initialPrompt}"
    .persistMessagesAcrossSessions="${persistMessagesAcrossSessions ?? false}"
    .shouldAutoOpen="${shouldAutoOpen ?? false}"
    .shouldAutoOpenMobile="${shouldAutoOpenMobile ?? false}"
  ></on-chat-bot-client>
`;

const TemplateWithCustomOpenButton: Story<Partial<OnChatBotClient>> = (
  {
    chatCloseImageUrl,
    chatOpenImageUrl,
    clientId,
    displayMode,
    env,
    initialPrompt,
    persistMessagesAcrossSessions,
    shouldAutoOpen,
    shouldAutoOpenMobile,
  },
  context
) => html`
  <button
    .onclick="${() =>
      Array.from(document.getElementsByTagName('on-chat-bot-client')).forEach(
        (item) => item.open()
      )}"
  >
    Open chat
  </button>
  <button
    .onclick="${() =>
      Array.from(document.getElementsByTagName('on-chat-bot-client')).forEach(
        (item) => item.close()
      )}"
  >
    Close chat
  </button>
  <button
    .onclick="${() =>
      Array.from(document.getElementsByTagName('on-chat-bot-client')).forEach(
        (item) => item.toggle()
      )}"
  >
    Toggle chat
  </button>

  ${Template(
    {
      chatCloseImageUrl,
      chatOpenImageUrl,
      clientId,
      displayMode,
      env,
      initialPrompt,
      persistMessagesAcrossSessions,
      shouldAutoOpen,
      shouldAutoOpenMobile,
    },
    context
  )}
`;

export const Default = Template.bind({});
Default.args = {
  clientId: DEFAULT_TEST_CLIENT_ID,
  debug: false,
  displayMode: DisplayMode.FULL_SCREEN,
  env: Environment.PRODUCTION,
  persistMessagesAcrossSessions: false,
  shouldAutoOpen: false,
  shouldAutoOpenMobile: false,
};

export const DisplayAsWidget = Template.bind({});
DisplayAsWidget.args = {
  ...Default.args,
  displayMode: DisplayMode.WIDGET,
};

export const DisplayAsWidgetWithoutButton = TemplateWithCustomOpenButton.bind(
  {}
);
DisplayAsWidgetWithoutButton.args = {
  ...Default.args,
  displayMode: DisplayMode.WIDGET_WITHOUT_BUTTON,
};

export const CustomWidgetButton = Template.bind({});
CustomWidgetButton.args = {
  ...Default.args,
  displayMode: DisplayMode.WIDGET,
  chatCloseImageUrl: 'https://d1hud7do04ixcl.cloudfront.net/favicon.ico',
  chatOpenImageUrl:
    'https://t4.ftcdn.net/jpg/00/30/86/41/360_F_30864182_LUH70G3Ij6Z96ezS1zQreu3SbMvQDEiP.jpg',
};

export const AnimatedWidgetButton = Template.bind({});
AnimatedWidgetButton.args = {
  ...Default.args,
  displayMode: DisplayMode.WIDGET,
  chatCloseImageUrl: 'https://d1hud7do04ixcl.cloudfront.net/favicon.ico',
  chatOpenImageUrl:
    'https://lottie.host/af8a8ecd-93b3-4d08-ac86-b053d185f310/pgO70HRgG1.json',
};

export const DisplayAsSurface = Template.bind({});
DisplayAsSurface.args = {
  ...Default.args,
  displayMode: DisplayMode.SURFACE,
};

DisplayAsSurface.parameters = { layout: 'fullscreen' };

DisplayAsSurface.decorators = [
  (story) =>
    html`
      <img src="${bg}" style="position: absolute; width: 100%; z-index: 0;" />
      ${story()}
    `,
];

export const InitialPrompt = Template.bind({});
InitialPrompt.args = {
  ...Default.args,
  initialPrompt: 'news',
};

export const PersistMessagesAcrossSessions = Template.bind({});
PersistMessagesAcrossSessions.args = {
  ...Default.args,
  persistMessagesAcrossSessions: true,
};

export const AutoOpenWidget = Template.bind({});
AutoOpenWidget.args = {
  ...Default.args,
  displayMode: DisplayMode.WIDGET,
  shouldAutoOpen: true,
  shouldAutoOpenMobile: true,
};