@asgard-js/react 0.0.2 → 0.0.3-8.canary-1

package/src/components/templates/time/index.ts

@@ -0,0 +1 @@
+export * from './time';

package/src/components/templates/time/time.module.scss

@@ -0,0 +1,6 @@
+.time {
+  display: flex;
+  align-items: flex-end;
+  font-size: 12px;
+  color: #8C8C8C;
+}

package/src/components/templates/time/time.tsx

@@ -0,0 +1,34 @@
+import { ReactNode, useMemo } from 'react';
+import { formatTime } from '../../../utils';
+import styles from './time.module.scss';
+import clsx from 'clsx';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+
+interface TimeProps {
+  time?: Date;
+  className?: string;
+}
+
+export function Time(props: TimeProps): ReactNode {
+  const { time, className } = props;
+
+  const { template } = useAsgardThemeContext();
+
+  const timeStyle = useMemo(
+    () => ({
+      color: template?.time?.style?.color,
+    }),
+    [template?.time?.style?.color]
+  );
+
+  if (!time) return null;
+
+  return (
+    <div
+      className={clsx('asgard-time', styles.time, className)}
+      style={timeStyle}
+    >
+      {formatTime(time)}
+    </div>
+  );
+}

package/src/context/asgard-app-initialization-context.tsx

@@ -0,0 +1,154 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
+import { ClientConfig } from '@asgard-js/core';
+import { getBotProviderModels } from '../models/bot-provider';
+import { useDeepCompareMemo } from '../hooks';
+import { deepMerge } from '../utils/deep-merge';
+import { extractRefs } from '../utils/extractors';
+
+type AsyncInitializers = {
+  [key: string]: () => Promise<unknown>;
+};
+
+export interface Annotations {
+  embedConfig: {
+    avatar?: string;
+    botTypingPlaceholder?: string;
+    debugMode?: boolean;
+    fullScreen?: boolean;
+    inputPlaceholder?: string;
+    theme: {
+      chatbot: {
+        backgroundColor?: string;
+        borderColor?: string;
+        inactiveColor?: string;
+        primaryComponent?: {
+          mainColor?: string;
+          secondaryColor?: string;
+        };
+      };
+      botMessage: {
+        backgroundColor?: string;
+        carouselButtonBackgroundColor?: string;
+        color?: string;
+      };
+      userMessage: {
+        backgroundColor?: string;
+        color?: string;
+      };
+    };
+    title?: string;
+  };
+}
+
+export interface AsgardAppInitializationContextValue {
+  data: {
+    annotations?: Annotations;
+  };
+  loading: boolean;
+  error: Error | null;
+}
+
+export const AsgardAppInitializationContext =
+  createContext<AsgardAppInitializationContextValue>({
+    data: {},
+    loading: true,
+    error: null,
+  });
+
+export interface AsgardAppInitializationContextProviderProps {
+  enabled: boolean;
+  config: ClientConfig;
+  asyncInitializers?: AsyncInitializers;
+  loadingComponent?: React.ReactNode;
+}
+
+export const AsgardAppInitializationContextProvider = (
+  props: PropsWithChildren<AsgardAppInitializationContextProviderProps>
+): ReactNode => {
+  const {
+    enabled,
+    asyncInitializers: asyncInitializersFromProp = {},
+    children,
+    loadingComponent = <div>Loading...</div>,
+  } = props;
+
+  const botProviderModels = useDeepCompareMemo(
+    () => getBotProviderModels(props.config),
+    [props.config]
+  );
+
+  const asyncInitializers = useDeepCompareMemo(
+    () =>
+      deepMerge(
+        { annotations: botProviderModels.getAnnotations },
+        asyncInitializersFromProp
+      ),
+    [...extractRefs(asyncInitializersFromProp), botProviderModels]
+  );
+
+  const [data, setData] = useState<AsgardAppInitializationContextValue['data']>(
+    {}
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    if (!enabled) {
+      return;
+    }
+
+    setLoading(true);
+
+    Promise.all(
+      Object.entries(asyncInitializers).map(async ([key, fn]) => {
+        try {
+          const value = await fn();
+
+          return [key, value];
+        } catch {
+          return [key, undefined];
+        }
+      })
+    )
+      .then((results) => {
+        if (isMounted) setData(Object.fromEntries(results));
+      })
+      .catch((err) => {
+        if (isMounted) setError(err);
+      })
+      .finally(() => {
+        if (isMounted) setLoading(false);
+      });
+
+    return (): void => {
+      isMounted = false;
+    };
+  }, [asyncInitializers, enabled]);
+
+  if (!enabled) {
+    return children;
+  }
+
+  if (loading) {
+    return loadingComponent;
+  }
+
+  return (
+    <AsgardAppInitializationContext.Provider value={{ data, loading, error }}>
+      {children}
+    </AsgardAppInitializationContext.Provider>
+  );
+};
+
+export const useAsgardAppInitializationContext =
+  (): AsgardAppInitializationContextValue =>
+    useContext(AsgardAppInitializationContext);

package/src/context/asgard-service-context.tsx

@@ -0,0 +1,145 @@
+import {
+  AsgardServiceClient,
+  ClientConfig,
+  ConversationMessage,
+} from '@asgard-js/core';
+import {
+  createContext,
+  ForwardedRef,
+  ReactNode,
+  RefObject,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  useAsgardServiceClient,
+  useChannel,
+  UseChannelProps,
+  UseChannelReturn,
+} from '../hooks';
+
+export interface AsgardServiceContextValue {
+  avatar?: string;
+  client: AsgardServiceClient | null;
+  isOpen: boolean;
+  isResetting: boolean;
+  isConnecting: boolean;
+  messages: Map<string, ConversationMessage> | null;
+  messageBoxBottomRef: RefObject<HTMLDivElement>;
+  sendMessage?: UseChannelReturn['sendMessage'];
+  resetChannel?: UseChannelReturn['resetChannel'];
+  closeChannel?: UseChannelReturn['closeChannel'];
+  botTypingPlaceholder?: string;
+  inputPlaceholder?: string;
+}
+
+export const AsgardServiceContext = createContext<AsgardServiceContextValue>({
+  avatar: undefined,
+  client: null,
+  isOpen: false,
+  isResetting: false,
+  isConnecting: false,
+  messages: null,
+  messageBoxBottomRef: { current: null },
+  botTypingPlaceholder: undefined,
+  inputPlaceholder: undefined,
+});
+
+export interface AsgardServiceContextProviderProps {
+  children: ReactNode;
+  parentRef?: ForwardedRef<
+    Partial<{ serviceContext?: AsgardServiceContextValue }>
+  >;
+  avatar?: string;
+  config: ClientConfig;
+  botTypingPlaceholder?: string;
+  inputPlaceholder?: string;
+  customChannelId: string;
+  customMessageId?: string;
+  delayTime?: number;
+  initMessages?: ConversationMessage[];
+  onSseMessage?: UseChannelProps['onSseMessage'];
+}
+
+export function AsgardServiceContextProvider(
+  props: AsgardServiceContextProviderProps
+): ReactNode {
+  const {
+    avatar,
+    children,
+    parentRef,
+    config,
+    botTypingPlaceholder,
+    inputPlaceholder,
+    customChannelId,
+    initMessages,
+    onSseMessage,
+  } = props;
+
+  const messageBoxBottomRef = useRef<HTMLDivElement>(null);
+
+  const client = useAsgardServiceClient({ config });
+
+  const {
+    isOpen,
+    isResetting,
+    isConnecting,
+    conversation,
+    sendMessage,
+    resetChannel,
+    closeChannel,
+  } = useChannel({
+    client,
+    customChannelId,
+    initMessages,
+    onSseMessage,
+  });
+
+  const contextValue = useMemo(
+    () => ({
+      avatar,
+      client,
+      isOpen,
+      isResetting,
+      isConnecting,
+      messages: conversation?.messages ?? null,
+      sendMessage,
+      resetChannel,
+      closeChannel,
+      botTypingPlaceholder,
+      inputPlaceholder,
+      messageBoxBottomRef,
+    }),
+    [
+      avatar,
+      client,
+      isOpen,
+      isResetting,
+      isConnecting,
+      conversation?.messages,
+      sendMessage,
+      resetChannel,
+      closeChannel,
+      botTypingPlaceholder,
+      inputPlaceholder,
+    ]
+  );
+
+  useImperativeHandle(parentRef, () => {
+    return {
+      serviceContext: contextValue,
+    };
+  });
+
+  return (
+    <AsgardServiceContext.Provider value={contextValue}>
+      {children}
+    </AsgardServiceContext.Provider>
+  );
+}
+
+export function useAsgardContext(): AsgardServiceContextValue {
+  return useContext(AsgardServiceContext);
+}

package/src/context/asgard-template-context.tsx

@@ -0,0 +1,83 @@
+import {
+  createContext,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+import { ConversationErrorMessage, FetchSsePayload } from '@asgard-js/core';
+
+export interface AsgardTemplateContextValue {
+  onErrorClick?: (message: ConversationErrorMessage) => void;
+  errorMessageRenderer?: (message: ConversationErrorMessage) => ReactNode;
+  onTemplateBtnClick?: (
+    payload: Record<string, unknown>,
+    {
+      sse,
+    }: {
+      sse: {
+        sendMessage: (
+          payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>
+        ) => void;
+      };
+    }
+  ) => void;
+  defaultLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+export const AsgardTemplateContext = createContext<AsgardTemplateContextValue>({
+  onErrorClick: undefined,
+  errorMessageRenderer: undefined,
+  onTemplateBtnClick: undefined,
+  defaultLinkTarget: undefined,
+});
+
+interface AsgardTemplateContextProviderProps extends PropsWithChildren {
+  onErrorClick?: (message: ConversationErrorMessage) => void;
+  errorMessageRenderer?: (message: ConversationErrorMessage) => ReactNode;
+  onTemplateBtnClick?: (
+    payload: Record<string, unknown>,
+    {
+      sse,
+    }: {
+      sse: {
+        sendMessage: (
+          payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>
+        ) => void;
+      };
+    }
+  ) => void;
+  defaultLinkTarget?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+export function AsgardTemplateContextProvider(
+  props: AsgardTemplateContextProviderProps
+): ReactNode {
+  const {
+    children,
+    onErrorClick,
+    errorMessageRenderer,
+    onTemplateBtnClick,
+    defaultLinkTarget,
+  } = props;
+
+  const contextValue = useMemo(
+    () => ({
+      onErrorClick,
+      errorMessageRenderer,
+      onTemplateBtnClick,
+      defaultLinkTarget,
+    }),
+    [errorMessageRenderer, onErrorClick, onTemplateBtnClick, defaultLinkTarget]
+  );
+
+  return (
+    <AsgardTemplateContext.Provider value={contextValue}>
+      {children}
+    </AsgardTemplateContext.Provider>
+  );
+}
+
+export function useAsgardTemplateContext(): AsgardTemplateContextValue {
+  return useContext(AsgardTemplateContext);
+}