@asgard-js/react 0.0.36 → 0.0.37-canary.2

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

@@ -1,417 +0,0 @@
-import {
-  createContext,
-  CSSProperties,
-  PropsWithChildren,
-  ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useCallback,
-} from 'react';
-import { deepMerge } from '../utils/deep-merge';
-import { addTransparency, darkenColor } from '../utils/color-utils';
-import {
-  useAsgardAppInitializationContext,
-  Annotations,
-} from './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 as unknown as Record<string, unknown>, {
-        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
-                  ? addTransparency(themeFromAnnotations.botMessage.backgroundColor, 0.2)
-                  : undefined,
-              },
-            },
-          },
-          time: {
-            style: {
-              color: themeFromAnnotations.chatbot?.inactiveColor,
-            },
-          },
-          TextMessageTemplate: {
-            style: {
-              // For unset messages
-              color:
-                themeFromAnnotations.chatbot?.primaryComponent?.secondaryColor,
-              backgroundColor: themeFromAnnotations.botMessage?.backgroundColor
-                ? addTransparency(themeFromAnnotations.botMessage.backgroundColor, 0.2)
-                : undefined,
-            },
-          },
-          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]);
-
-  // 設置 CSS 自定義屬性
-  useEffect(() => {
-    const botMessageBgColor = annotations?.embedConfig?.theme?.botMessage?.backgroundColor;
-    if (botMessageBgColor) {
-      document.documentElement.style.setProperty(
-        '--bot-message-hyperlink-color',
-        darkenColor(botMessageBgColor, 0.2)
-      );
-    }
-  }, [annotations?.embedConfig?.theme?.botMessage?.backgroundColor]);
-
-  return (
-    <AsgardThemeContext.Provider value={value}>
-      {children}
-    </AsgardThemeContext.Provider>
-  );
-}
-
-export function useAsgardThemeContext(): AsgardThemeContextValue {
-  return useContext(AsgardThemeContext);
-}

package/src/context/index.ts

@@ -1,4 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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 './use-react-markdown-renderer';

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

@@ -1,68 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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'> & Partial<Pick<FetchSsePayload, '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'> & Partial<Pick<FetchSsePayload, 'payload'>>) => void;
-  resetChannel?: (payload?: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, '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'> & Partial<Pick<FetchSsePayload, '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: Channel | null) => {
-      prevChannel?.close();
-
-      return null;
-    });
-    setIsOpen(false);
-    setIsResetting(false);
-    setIsConnecting(false);
-    setConversation(null);
-  }, []);
-
-  const sendMessage = useCallback(
-    (payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) =>
-      channel?.sendMessage({ ...payload, customMessageId }),
-    [channel, customMessageId]
-  );
-
-  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

@@ -1,18 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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;
-}