@botpress/webchat 2.4.0-beta.1 → 2.4.0-beta.3

package/.eslintrc.cjs

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@repo/eslint-config/react-internal.js"],
+  extends: ["@repo/eslint-config/react-internal.js", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   ignorePatterns: ["dist", "node_modules", "storybook-static", ".turbo", "turbo/*"],
   parserOptions: {

package/.storybook/main.ts

@@ -0,0 +1,25 @@
+import { join, dirname } from 'path'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+}
+export default config

package/.storybook/preview.tsx

@@ -0,0 +1,112 @@
+// import '../src/index.css' // This has to be imported as early as possible
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import { StylesheetProvider } from '../src/providers'
+import { Container } from '../src/components'
+
+const radiusMap = {
+  none: 0,
+  sm: 0.5,
+  md: 1,
+  lg: 2,
+  xl: 4,
+}
+
+const colorMap = {
+  red: '#dc2626',
+  orange: '#ea580c',
+  amber: '#d97706',
+  yellow: '#eab308',
+  lime: '#a3e635',
+  green: '#22c55e',
+  emerald: '#10b981',
+  teal: '#14b8a6',
+  cyan: '#06b6d4',
+  sky: '#0ea5e9',
+  blue: '#3b82f6',
+  indigo: '#6366f1',
+  violet: '#8b5cf6',
+  purple: '#9333ea',
+  fuchsia: '#d946ef',
+  pink: '#ec4899',
+}
+
+/** @type { import('@storybook/react').Preview } */
+const preview: Preview = {
+  initialGlobals: {
+    themeMode: 'light',
+    fontFamily: 'inter',
+    radius: 'md',
+    variant: 'solid',
+    color: 'blue',
+  },
+  globalTypes: {
+    themeMode: {
+      toolbar: {
+        dynamicTitle: true,
+        title: 'Theme',
+        icon: 'mirror',
+        items: ['light', 'dark'],
+      },
+    },
+    fontFamily: {
+      toolbar: {
+        title: 'Font Family',
+        dynamicTitle: true,
+        icon: 'edit',
+        items: ['rubik', 'inter', 'ibm', 'fira'],
+      },
+    },
+    radius: {
+      toolbar: {
+        title: 'Radius',
+        dynamicTitle: true,
+        icon: 'button',
+        items: Object.keys(radiusMap),
+      },
+    },
+    variant: {
+      toolbar: {
+        title: 'Variant',
+        dynamicTitle: true,
+        icon: 'expandalt',
+        items: ['solid', 'soft'],
+      },
+    },
+    color: {
+      toolbar: {
+        title: 'Color',
+        dynamicTitle: true,
+        icon: 'paintbrush',
+        items: Object.keys(colorMap),
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const { themeMode, variant, radius, fontFamily, color } = context.globals
+      return (
+        // TODO: These css hacks should not be required
+        <Container
+          className="bpReset bpContainer"
+          style={{ width: '400px', border: 'none', backgroundColor: 'transparent' }}
+        >
+          <StylesheetProvider
+            {...{ themeMode, variant, fontFamily, radius: radiusMap[radius], color: colorMap[color] }}
+          />
+          <Story />
+        </Container>
+      )
+    },
+  ],
+}
+
+export default preview

package/.turbo/turbo-build.log

@@ -1,25 +1,19 @@
 
-> @botpress/webchat@2.4.0-beta.1 build /home/runner/work/genisys/genisys/packages/webchat-components
+> @botpress/webchat@2.4.0-beta.3 build /home/runner/work/genisys/genisys/packages/webchat-components
 > vite build
 
 vite v5.4.8 building for production...
 transforming...
-[plugin:vite:resolve] [plugin vite:resolve] Module "crypto" has been externalized for browser compatibility, imported by "/home/runner/work/genisys/genisys/node_modules/.pnpm/@bpinternal+webchat-http-client@0.2.2/node_modules/@bpinternal/webchat-http-client/dist/index.mjs". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
-[vite:css] /home/runner/work/genisys/genisys/packages/webchat-components/src/components/renderers/Audio/styles.css is empty
-1  |  @import './resets.css';
-   |  ^^^^^^^^^^^^^^^^^^^^^^^
-2  |  @import './theme.css';
-   |  ^^^^^^
-3  |  @import '../components/index.css'
-✓ 3103 modules transformed.
+[plugin:vite:resolve] [plugin vite:resolve] Module "crypto" has been externalized for browser compatibility, imported by "/home/runner/work/genisys/genisys/node_modules/.pnpm/@bpinternal+webchat-http-client@0.2.3/node_modules/@bpinternal/webchat-http-client/dist/index.mjs". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
+✓ 3105 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
 computing gzip size...
-dist/style.css     31.78 kB │ gzip:   5.90 kB
-dist/index.js   1,023.36 kB │ gzip: 267.30 kB
-[vite:dts] Declaration files built in 11767ms.
+dist/style.css     32.56 kB │ gzip:   6.24 kB
+dist/index.js   1,024.28 kB │ gzip: 267.68 kB
+[vite:dts] Declaration files built in 10856ms.
 
-dist/style.css       31.78 kB │ gzip:   5.90 kB
-dist/index.umd.cjs  701.36 kB │ gzip: 222.77 kB
-✓ built in 20.49s
+dist/style.css       32.56 kB │ gzip:   6.24 kB
+dist/index.umd.cjs  702.08 kB │ gzip: 223.03 kB
+✓ built in 19.52s

package/dist/adapters/target.d.ts

@@ -59,6 +59,7 @@ export type RowMessage = {
 export type TextMessage = {
     type: 'text';
     text: string;
+    value?: string;
 };
 export type VideoMessage = {
     type: 'video';

package/dist/adapters/webchat.d.ts

@@ -1,4 +1,4 @@
 import * as types from './typings';
-import * as models from '../gen/client/models';
+import * as models from '@bpinternal/webchat-http-client';
 export type Message = models.Message['payload'];
 export type Messages = types.ByType<Message>;

package/dist/components/Composer/Composer.d.ts

@@ -7,8 +7,8 @@ type Props = ComponentProps<'div'> & {
     isReadOnly?: boolean;
     allowFileUpload?: boolean;
     connected?: boolean;
-    sendMessage: (payload: Message) => void;
-    uploadFile: (file: File) => Promise<{
+    sendMessage?: (payload: Message) => void;
+    uploadFile?: (file: File) => Promise<{
         fileUrl: string;
         name: string;
         type: FileType;

package/dist/components/Message/Message.d.ts

@@ -4,7 +4,7 @@ import type { Message as WebchatMessage } from '../../adapters/webchat';
 export declare const Message: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
     children?: ReactNode;
     renderers?: Partial<Renderers>;
-    sendMessage: (payload: WebchatMessage) => void;
+    sendMessage?: (payload: WebchatMessage) => void;
     isReadOnly?: boolean;
 } & import("../..").MessageObject<import("../../adapters/target").Message> & {
     direction: import("../..").MessageDirection;

package/dist/components/MessageList/MessageList.d.ts

@@ -9,7 +9,8 @@ type MessageListProps = {
     botAvatar?: string;
     botDescription?: string;
     botName?: string;
-    sendMessage: (payload: WebchatMessage) => void;
+    sendMessage?: (payload: WebchatMessage) => void;
+    showMarquee?: boolean;
 };
-export declare const MessageList: import("react").MemoExoticComponent<({ className, messages, isTyping, headerMessage, renderers, botAvatar, botDescription, botName, sendMessage, ...props }: ComponentProps<"ul"> & MessageListProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MessageList: import("react").MemoExoticComponent<({ className, messages, isTyping, headerMessage, renderers, botAvatar, botDescription, botName, sendMessage, showMarquee, ...props }: ComponentProps<"ul"> & MessageListProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/Webchat.d.ts

@@ -11,6 +11,7 @@ export type Props = {
     isTyping?: boolean;
     lastTypingHeartbeat?: Date | null;
     allowFileUpload?: boolean;
+    clientId?: string;
     closeWindow?: () => void;
     restartConversation?: () => void;
     user: {
@@ -25,4 +26,4 @@ export type Props = {
         type: FileType;
     }>;
 };
-export declare const Webchat: ({ connected, configuration, closeWindow, isTyping, messages, user, sendMessage, uploadFile, isLoading, renderers, isReadOnly, disableComposer, restartConversation, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Webchat: ({ connected, configuration, closeWindow, isTyping, messages, user, sendMessage, uploadFile, isLoading, renderers, isReadOnly, disableComposer, restartConversation, allowFileUpload, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/renderers/Audio/Audio.d.ts

@@ -1,6 +1,6 @@
 export declare const Audio: import("react").ForwardRefExoticComponent<import("../../../adapters/target").AudioMessage & Pick<import("../../..").RichMessageObject<import("../../../adapters/target").Message>, "direction" | "timestamp" | "sender"> & {
     messageId: string;
-    sendMessage: (payload: import("../../../adapters/webchat").Message) => void;
+    sendMessage?: (payload: import("../../../adapters/webchat").Message) => void;
     metadata?: Record<string, any>;
     isReadOnly?: boolean;
 } & import("react").RefAttributes<HTMLAudioElement>>;

package/dist/components/renderers/Carousel/Carousel.d.ts

@@ -1,6 +1,6 @@
 export declare const Carousel: import("react").ForwardRefExoticComponent<import("../../../adapters/target").CarouselMessage & Pick<import("../../..").RichMessageObject<import("../../../adapters/target").Message>, "direction" | "timestamp" | "sender"> & {
     messageId: string;
-    sendMessage: (payload: import("../../../adapters/webchat").Message) => void;
+    sendMessage?: (payload: import("../../../adapters/webchat").Message) => void;
     metadata?: Record<string, any>;
     isReadOnly?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/renderers/File/File.d.ts

@@ -1,6 +1,6 @@
 export declare const File: import("react").ForwardRefExoticComponent<import("../../../adapters/target").FileMessage & Pick<import("../../..").RichMessageObject<import("../../../adapters/target").Message>, "direction" | "timestamp" | "sender"> & {
     messageId: string;
-    sendMessage: (payload: import("../../../adapters/webchat").Message) => void;
+    sendMessage?: (payload: import("../../../adapters/webchat").Message) => void;
     metadata?: Record<string, any>;
     isReadOnly?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/renderers/Image/Image.d.ts

@@ -1,6 +1,6 @@
 export declare const Image: import("react").ForwardRefExoticComponent<import("../../../adapters/target").ImageMessage & Pick<import("../../..").RichMessageObject<import("../../../adapters/target").Message>, "direction" | "timestamp" | "sender"> & {
     messageId: string;
-    sendMessage: (payload: import("../../../adapters/webchat").Message) => void;
+    sendMessage?: (payload: import("../../../adapters/webchat").Message) => void;
     metadata?: Record<string, any>;
     isReadOnly?: boolean;
 } & import("react").RefAttributes<HTMLImageElement>>;

package/dist/components/renderers/Location/Location.d.ts

@@ -1,6 +1,6 @@
 export declare const Location: import("react").ForwardRefExoticComponent<import("../../../adapters/target").LocationMessage & Pick<import("../../..").RichMessageObject<import("../../../adapters/target").Message>, "direction" | "timestamp" | "sender"> & {
     messageId: string;
-    sendMessage: (payload: import("../../../adapters/webchat").Message) => void;
+    sendMessage?: (payload: import("../../../adapters/webchat").Message) => void;
     metadata?: Record<string, any>;
     isReadOnly?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/renderers/Video/Video.d.ts

@@ -1,6 +1,6 @@
 export declare const Video: import("react").ForwardRefExoticComponent<import("../../../adapters/target").VideoMessage & Pick<import("../../..").RichMessageObject<import("../../../adapters/target").Message>, "direction" | "timestamp" | "sender"> & {
     messageId: string;
-    sendMessage: (payload: import("../../../adapters/webchat").Message) => void;
+    sendMessage?: (payload: import("../../../adapters/webchat").Message) => void;
     metadata?: Record<string, any>;
     isReadOnly?: boolean;
 } & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/hooks/index.d.ts

@@ -1,7 +1,5 @@
 export * from './useClient';
-export * from './useConversationId';
 export * from './useImageSize';
 export * from './useIsTyping';
 export * from './useRefresh';
-export * from './useUserCredentials';
 export * from './useWebchatClient';

package/dist/hooks/useWebchatClient.d.ts

@@ -10,6 +10,7 @@ type Props = {
     clientId: string;
     apiUrl?: string;
     sseTimeout?: number;
+    storageKey?: string;
 };
 type ScopedClient = {
     sendMessage: (payload: WebchatMessage) => Promise<void>;
@@ -43,5 +44,5 @@ export type UseWebchatClientReturn = {
     user: undefined;
     isTyping: undefined;
 };
-export declare function useWebchatClient({ apiUrl, clientId, ...props }: Props): UseWebchatClientReturn;
+export declare function useWebchatClient({ apiUrl, clientId, storageKey, ...props }: Props): UseWebchatClientReturn;
 export {};

package/dist/index.d.ts

@@ -12,4 +12,4 @@ export { webchatClasses } from './styles';
 export { type WebchatClient, type WebchatEvents, getClient, type Client } from './client';
 export { useClient, useWebchatClient, type UseWebchatClientReturn } from './hooks';
 export { generateThemeStylesheet } from './utils';
-export { useWebchatStore, useOfflineStore } from './stores';
+export { useWebchatStore, getUseUserStore } from './stores';