@asgard-js/react 0.0.31 → 0.0.32-canary.0

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

@@ -0,0 +1,401 @@
+import {
+  createContext,
+  CSSProperties,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useMemo,
+  useCallback,
+} from 'react';
+import { deepMerge } from 'src/utils/deep-merge';
+import {
+  useAsgardAppInitializationContext,
+  Annotations,
+} from 'src/context/asgard-app-initialization-context';
+
+export interface AsgardThemeContextValue {
+  chatbot: Pick<
+    CSSProperties,
+    | 'width'
+    | 'height'
+    | 'maxWidth'
+    | 'minWidth'
+    | 'maxHeight'
+    | 'minHeight'
+    | 'backgroundColor'
+    | 'borderColor'
+    | 'borderRadius'
+  > & {
+    contentMaxWidth?: CSSProperties['maxWidth'];
+    backgroundColor?: CSSProperties['backgroundColor'];
+    borderColor?: CSSProperties['borderColor'];
+    inactiveColor?: CSSProperties['color'];
+    primaryComponent?: {
+      mainColor?: CSSProperties['color'];
+      secondaryColor?: CSSProperties['color'];
+    };
+    style?: CSSProperties;
+    header?: Partial<{
+      style: CSSProperties;
+      title: {
+        style: CSSProperties;
+      };
+      actionButton?: {
+        style: CSSProperties;
+      };
+    }>;
+    body?: Partial<{
+      style: CSSProperties;
+    }>;
+    footer?: Partial<{
+      style: CSSProperties;
+      textArea: {
+        style: CSSProperties;
+        '::placeholder': CSSProperties;
+      };
+      submitButton: {
+        style: CSSProperties;
+      };
+      speechInputButton: {
+        style: CSSProperties;
+      };
+    }>;
+  };
+  botMessage: Pick<CSSProperties, 'color' | 'backgroundColor'>;
+  userMessage: Pick<CSSProperties, 'color' | 'backgroundColor'>;
+  template?: Partial<{
+    /**
+     * first level for common/shared properties.
+     * Check MessageTemplate type for more details (packages/core/src/types/sse-response.ts).
+     */
+    quickReplies?: Partial<{
+      style: CSSProperties;
+      button: {
+        style: CSSProperties;
+      };
+    }>;
+    time?: Partial<{
+      style: CSSProperties;
+    }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    TextMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    HintMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    ImageMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    VideoMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    AudioMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    LocationMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    ChartMessageTemplate: Partial<{ style: CSSProperties }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    ButtonMessageTemplate: Partial<{
+      style: CSSProperties;
+      button?: {
+        style: CSSProperties;
+      };
+    }>;
+    /**
+     * TBD: Fill the necessary properties based on the requirements.
+     */
+    CarouselMessageTemplate: Partial<{
+      style: CSSProperties;
+      card: {
+        style: CSSProperties;
+        button?: {
+          style: CSSProperties;
+        };
+      };
+    }>;
+  }>;
+}
+
+export const defaultAsgardThemeContextValue: AsgardThemeContextValue = {
+  chatbot: {
+    width: '375px',
+    height: '640px',
+    backgroundColor: 'var(--asg-color-bg)',
+    borderColor: 'var(--asg-color-border)',
+    borderRadius: 'var(--asg-radius-md)',
+    contentMaxWidth: '1200px',
+    style: {},
+    header: {
+      style: {},
+      title: {
+        style: {},
+      },
+      actionButton: {
+        style: {},
+      },
+    },
+    body: {
+      style: {},
+    },
+    footer: {
+      style: {},
+      textArea: {
+        style: {},
+        '::placeholder': {
+          color: 'var(--asg-color-text-placeholder)',
+        },
+      },
+      submitButton: {
+        style: {},
+      },
+      speechInputButton: {
+        style: {},
+      },
+    },
+  },
+  botMessage: {
+    color: 'var(--asg-color-text)',
+    backgroundColor: 'var(--asg-color-secondary)',
+  },
+  userMessage: {
+    color: 'var(--asg-color-text)',
+    backgroundColor: 'var(--asg-color-primary)',
+  },
+  template: {
+    quickReplies: {
+      style: {},
+      button: {
+        style: {},
+      },
+    },
+    time: {
+      style: {},
+    },
+    TextMessageTemplate: {
+      style: {},
+    },
+    HintMessageTemplate: {
+      style: {},
+    },
+    ImageMessageTemplate: {
+      style: {},
+    },
+    VideoMessageTemplate: {
+      style: {},
+    },
+    AudioMessageTemplate: {
+      style: {},
+    },
+    LocationMessageTemplate: {
+      style: {},
+    },
+    ChartMessageTemplate: {
+      style: {},
+    },
+    ButtonMessageTemplate: {
+      style: {},
+      button: {
+        style: {
+          border: '1px solid var(--asg-color-border)',
+        },
+      },
+    },
+    CarouselMessageTemplate: {
+      style: {},
+      card: {
+        style: {},
+        button: {
+          style: {
+            border: '1px solid var(--asg-color-border)',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const AsgardThemeContext = createContext<AsgardThemeContextValue>(
+  defaultAsgardThemeContextValue
+);
+
+export function AsgardThemeContextProvider(
+  props: PropsWithChildren<{
+    theme?: Partial<AsgardThemeContextValue>;
+  }>
+): ReactNode {
+  const { children, theme = {} } = props;
+  const {
+    data: { annotations },
+  } = useAsgardAppInitializationContext();
+
+  const deepMergeTheme = useCallback(
+    function () {
+      /**
+       * Orders of theme (high to low):
+       * 1. Theme from props
+       * 2. Theme from annotations
+       * 3. Default theme
+       */
+
+      const themeFromAnnotations: Annotations['embedConfig']['theme'] =
+        annotations?.embedConfig?.theme ?? {
+          chatbot: {},
+          botMessage: {},
+          userMessage: {},
+        };
+
+      const tempTheme = deepMerge(defaultAsgardThemeContextValue, {
+        chatbot: {
+          backgroundColor: themeFromAnnotations.chatbot?.backgroundColor,
+          borderColor: themeFromAnnotations.chatbot?.borderColor,
+          header: {
+            style: {
+              borderBottomColor: themeFromAnnotations.chatbot?.borderColor,
+            },
+            title: {
+              style: {
+                color:
+                  themeFromAnnotations.chatbot?.primaryComponent
+                    ?.secondaryColor, // Title text color
+              },
+            },
+            actionButton: {
+              style: {
+                color: themeFromAnnotations.chatbot?.inactiveColor,
+              },
+            },
+          },
+          body: {
+            style: {
+              // Time/timestamp text color
+              color: themeFromAnnotations.chatbot?.inactiveColor,
+            },
+          },
+          footer: {
+            style: {
+              borderTopColor: themeFromAnnotations.chatbot?.borderColor,
+            },
+            textArea: {
+              style: {
+                color: themeFromAnnotations.chatbot?.inactiveColor,
+                backgroundColor: themeFromAnnotations.chatbot?.backgroundColor,
+              },
+              '::placeholder': {
+                color: themeFromAnnotations.chatbot?.inactiveColor,
+              },
+            },
+            submitButton: {
+              style: {
+                color:
+                  themeFromAnnotations.chatbot?.primaryComponent
+                    ?.secondaryColor,
+              },
+            },
+            speechInputButton: {
+              style: {
+                color:
+                  themeFromAnnotations.chatbot?.primaryComponent
+                    ?.secondaryColor,
+              },
+            },
+          },
+        },
+        botMessage: {
+          backgroundColor: themeFromAnnotations.botMessage?.backgroundColor, // #585858
+          color: themeFromAnnotations.botMessage?.color,
+        },
+        userMessage: {
+          backgroundColor: themeFromAnnotations.userMessage?.backgroundColor,
+          color: themeFromAnnotations.userMessage?.color,
+        },
+        template: {
+          quickReplies: {
+            button: {
+              style: {
+                color:
+                  themeFromAnnotations.chatbot?.primaryComponent
+                    ?.secondaryColor, // Button text (#FFFFFF)
+                borderColor: themeFromAnnotations.chatbot?.borderColor,
+                backgroundColor: themeFromAnnotations.botMessage
+                  ?.backgroundColor
+                  ? `${themeFromAnnotations.botMessage.backgroundColor}33`
+                  : undefined,
+              },
+            },
+          },
+          time: {
+            style: {
+              color: themeFromAnnotations.chatbot?.inactiveColor,
+            },
+          },
+          TextMessageTemplate: {
+            style: {
+              // For unset messages
+              color:
+                themeFromAnnotations.chatbot?.primaryComponent?.secondaryColor,
+            },
+          },
+          ButtonMessageTemplate: {
+            button: {
+              style: {
+                borderColor: themeFromAnnotations.chatbot?.borderColor,
+                backgroundColor:
+                  themeFromAnnotations.chatbot?.primaryComponent?.mainColor,
+                color:
+                  themeFromAnnotations.chatbot?.primaryComponent
+                    ?.secondaryColor,
+              },
+            },
+          },
+          CarouselMessageTemplate: {
+            card: {
+              style: {
+                backgroundColor:
+                  themeFromAnnotations.botMessage
+                    ?.carouselButtonBackgroundColor,
+              },
+              button: {
+                style: {
+                  borderColor: themeFromAnnotations.chatbot?.borderColor,
+                  backgroundColor:
+                    themeFromAnnotations.chatbot?.primaryComponent?.mainColor,
+                  color:
+                    themeFromAnnotations.chatbot?.primaryComponent
+                      ?.secondaryColor,
+                },
+              },
+            },
+          },
+        },
+      });
+
+      return deepMerge(tempTheme, theme);
+    },
+    [theme, annotations?.embedConfig?.theme]
+  );
+
+  const value = useMemo(() => deepMergeTheme(), [deepMergeTheme]);
+
+  return (
+    <AsgardThemeContext.Provider value={value}>
+      {children}
+    </AsgardThemeContext.Provider>
+  );
+}
+
+export function useAsgardThemeContext(): AsgardThemeContextValue {
+  return useContext(AsgardThemeContext);
+}

package/src/context/index.ts

@@ -0,0 +1,4 @@
+export * from './asgard-service-context';
+export * from './asgard-template-context';
+export * from './asgard-theme-context';
+export * from './asgard-app-initialization-context';

package/src/hooks/index.ts

@@ -0,0 +1,11 @@
+export * from './use-asgard-service-client';
+export * from './use-channel';
+export * from './use-debounce';
+export * from './use-viewport-size';
+export * from './use-is-on-screen-keyboard-open';
+export * from './use-on-screen-keyboard-scroll-fix';
+export * from './use-prevent-over-scrolling';
+export * from './use-update-vh';
+export * from './use-resize-observer';
+export * from './use-deep-compare-memo';
+export * from 'src/components/templates/text-template/use-react-markdown-renderer';

package/src/hooks/use-asgard-service-client.ts

@@ -0,0 +1,68 @@
+import { ClientConfig, AsgardServiceClient, EventType } from '@asgard-js/core';
+import { useEffect, useRef } from 'react';
+
+interface UseAsgardServiceClientProps {
+  config: ClientConfig;
+}
+
+export function useAsgardServiceClient(
+  props: UseAsgardServiceClientProps
+): AsgardServiceClient | null {
+  const { config } = props;
+
+  const { onRunInit, onProcess, onMessage, onToolCall, onRunDone, onRunError } =
+    config;
+
+  const clientRef = useRef<AsgardServiceClient | null>(null);
+
+  if (!clientRef.current) {
+    clientRef.current = new AsgardServiceClient(config);
+  }
+
+  useEffect(() => {
+    return (): void => {
+      if (clientRef.current) {
+        clientRef.current.close();
+        clientRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!clientRef.current || !onRunInit) return;
+
+    clientRef.current.on(EventType.INIT, onRunInit);
+  }, [onRunInit]);
+
+  useEffect(() => {
+    if (!clientRef.current || !onProcess) return;
+
+    clientRef.current.on(EventType.PROCESS, onProcess);
+  }, [onProcess]);
+
+  useEffect(() => {
+    if (!clientRef.current || !onMessage) return;
+
+    clientRef.current.on(EventType.MESSAGE, onMessage);
+  }, [onMessage]);
+
+  useEffect(() => {
+    if (!clientRef.current || !onToolCall) return;
+
+    clientRef.current.on(EventType.TOOL_CALL, onToolCall);
+  }, [onToolCall]);
+
+  useEffect(() => {
+    if (!clientRef.current || !onRunDone) return;
+
+    clientRef.current.on(EventType.DONE, onRunDone);
+  }, [onRunDone]);
+
+  useEffect(() => {
+    if (!clientRef.current || !onRunError) return;
+
+    clientRef.current.on(EventType.ERROR, onRunError);
+  }, [onRunError]);
+
+  return clientRef.current;
+}

package/src/hooks/use-channel.ts

@@ -0,0 +1,154 @@
+import {
+  AsgardServiceClient,
+  Channel,
+  ChannelStates,
+  Conversation,
+  ConversationMessage,
+  EventType,
+  FetchSsePayload,
+  SseResponse,
+} from '@asgard-js/core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface UseChannelProps {
+  defaultIsOpen?: boolean;
+  resetPayload?: Pick<FetchSsePayload, 'text' | 'payload'>;
+  client: AsgardServiceClient | null;
+  customChannelId: string;
+  customMessageId?: string;
+  initMessages?: ConversationMessage[];
+  onSseMessage?: (
+    response: SseResponse<EventType>,
+    context: {
+      conversation: Conversation | null;
+    }
+  ) => void;
+}
+
+export interface UseChannelReturn {
+  isOpen: boolean;
+  isResetting: boolean;
+  isConnecting: boolean;
+  conversation: Conversation | null;
+  sendMessage?: (payload: Pick<FetchSsePayload, 'text' | 'payload'>) => void;
+  resetChannel?: (payload?: Pick<FetchSsePayload, 'text' | 'payload'>) => void;
+  closeChannel?: () => void;
+}
+
+export function useChannel(props: UseChannelProps): UseChannelReturn {
+  const {
+    client,
+    defaultIsOpen,
+    resetPayload,
+    customChannelId,
+    customMessageId,
+    initMessages,
+    onSseMessage,
+  } = props;
+
+  if (!client) {
+    throw new Error('Client instance is required');
+  }
+
+  if (!customChannelId) {
+    throw new Error('Custom channel id is required');
+  }
+
+  const [channel, setChannel] = useState<Channel | null>(null);
+  const [isOpen, setIsOpen] = useState(defaultIsOpen ?? true);
+  const [isResetting, setIsResetting] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [conversation, setConversation] = useState<Conversation | null>(null);
+
+  const resetChannel = useCallback(
+    async (payload?: Pick<FetchSsePayload, 'text' | 'payload'>) => {
+      const conversation = new Conversation({
+        messages: new Map(
+          initMessages?.map((message) => [message.messageId, message])
+        ),
+      });
+
+      setIsResetting(true);
+      setIsConnecting(true);
+      setConversation(conversation);
+
+      const channel = await Channel.reset(
+        {
+          client,
+          customChannelId,
+          customMessageId,
+          conversation,
+          statesObserver: (states: ChannelStates): void => {
+            setIsConnecting(states.isConnecting);
+            setConversation(states.conversation);
+          },
+        },
+        payload,
+        {
+          onSseCompleted() {
+            setIsResetting(false);
+          },
+          onSseError() {
+            setIsResetting(false);
+          },
+          onSseMessage(response: SseResponse<EventType>) {
+            onSseMessage?.(response, {
+              conversation,
+            });
+          },
+        }
+      );
+
+      setIsOpen(true);
+      setChannel(channel);
+    },
+    [client, customChannelId, customMessageId, initMessages, onSseMessage]
+  );
+
+  const closeChannel = useCallback(() => {
+    setChannel((prevChannel) => {
+      prevChannel?.close();
+
+      return null;
+    });
+    setIsOpen(false);
+    setIsResetting(false);
+    setIsConnecting(false);
+    setConversation(null);
+  }, []);
+
+  const sendMessage = useCallback(
+    (payload: Pick<FetchSsePayload, 'text' | 'payload'>) =>
+      channel?.sendMessage(payload),
+    [channel]
+  );
+
+  useEffect(() => {
+    if (!channel && isOpen) resetChannel(resetPayload);
+  }, [channel, isOpen, resetChannel, resetPayload]);
+
+  useEffect(() => {
+    return (): void => closeChannel();
+  }, [closeChannel]);
+
+  return useMemo(
+    () => ({
+      isOpen,
+      isResetting,
+      isConnecting,
+      conversation,
+      sendMessage,
+      resetChannel,
+      closeChannel,
+    }),
+    [
+      isOpen,
+      isResetting,
+      isConnecting,
+      conversation,
+      sendMessage,
+      resetChannel,
+      closeChannel,
+    ]
+  );
+}

package/src/hooks/use-debounce.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce<ValueType>(
+  value: ValueType,
+  delay?: number
+): ValueType {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = window.setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay ?? 300);
+
+    return (): void => clearTimeout(handler);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/use-deep-compare-memo.ts

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+import { isEqual } from '../utils/is';
+
+/**
+ * useDeepCompareMemo: React hook that only recomputes the value when deps deeply change.
+ * @param factory - function to create the value
+ * @param deps - dependency array (deep compared)
+ */
+export function useDeepCompareMemo<T>(factory: () => T, deps: unknown[]): T {
+  const valueRef = useRef<T>();
+  const depsRef = useRef<unknown[]>();
+
+  if (!depsRef.current || !isEqual(depsRef.current, deps)) {
+    depsRef.current = deps;
+    valueRef.current = factory();
+  }
+
+  return valueRef.current as T;
+}