@asgard-js/react 0.0.43 → 0.0.44-canary.1

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

@@ -1,553 +0,0 @@
-import {
-  createContext,
-  CSSProperties,
-  PropsWithChildren,
-  ReactNode,
-  useContext,
-  useMemo,
-  useCallback,
-} from 'react';
-import { deepMerge } from '../utils/deep-merge';
-import { 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'];
-    mainColor?: CSSProperties['color'];
-    secondaryColor?: 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'> & {
-    carouselButtonBackgroundColor?: CSSProperties['backgroundColor'];
-    linkColor?: CSSProperties['color'];
-    unsentBackgroundColor?: CSSProperties['backgroundColor'];
-    quickReplyBackgroundColor?: CSSProperties['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,
-          mainColor: themeFromAnnotations.chatbot?.primaryComponent?.mainColor,
-          secondaryColor: themeFromAnnotations.chatbot?.primaryComponent?.secondaryColor,
-          
-          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,
-          linkColor: themeFromAnnotations.botMessage?.backgroundColor 
-            ? darkenColor(themeFromAnnotations.botMessage.backgroundColor, 0.2)
-            : undefined,
-          unsentBackgroundColor: themeFromAnnotations.botMessage?.backgroundColor 
-            ? `color-mix(in srgb, ${themeFromAnnotations.botMessage.backgroundColor} 20%, transparent)`
-            : undefined,
-          quickReplyBackgroundColor: themeFromAnnotations.botMessage?.backgroundColor 
-            ? `color-mix(in srgb, ${themeFromAnnotations.botMessage.backgroundColor} 20%, transparent)`
-            : undefined,
-        },
-        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?.primaryComponent?.mainColor,
-                backgroundColor:
-                  themeFromAnnotations.chatbot?.primaryComponent?.mainColor,
-                color:
-                  themeFromAnnotations.chatbot?.primaryComponent
-                    ?.secondaryColor,
-              },
-            },
-          },
-          CarouselMessageTemplate: {
-            card: {
-              style: {
-                backgroundColor:
-                  themeFromAnnotations.botMessage
-                    ?.carouselButtonBackgroundColor,
-              },
-              button: {
-                style: {
-                  borderColor: themeFromAnnotations.chatbot?.primaryComponent?.mainColor,
-                  backgroundColor:
-                    themeFromAnnotations.chatbot?.primaryComponent?.mainColor,
-                  color:
-                    themeFromAnnotations.chatbot?.primaryComponent
-                      ?.secondaryColor,
-                },
-              },
-            },
-          },
-        },
-      });
-
-      // Handle theme prop that contains backend format (like themeFromAnnotations)
-      const propsTheme = theme as any; // Cast to handle backend format
-      const propsHasBackendFormat = propsTheme.chatbot?.primaryComponent || propsTheme.chatbot?.backgroundColor || propsTheme.botMessage || propsTheme.userMessage;
-      
-      if (propsHasBackendFormat) {
-        // Apply same transformation logic as tempTheme for props theme
-        const transformedPropsTheme = deepMerge(defaultAsgardThemeContextValue as unknown as Record<string, unknown>, {
-          chatbot: {
-            backgroundColor: propsTheme.chatbot?.backgroundColor,
-            borderColor: propsTheme.chatbot?.borderColor,
-            mainColor: propsTheme.chatbot?.primaryComponent?.mainColor,
-            secondaryColor: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-            header: {
-              style: {
-                borderBottomColor: propsTheme.chatbot?.borderColor,
-              },
-              title: {
-                style: {
-                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-                },
-              },
-              actionButton: {
-                style: {
-                  color: propsTheme.chatbot?.inactiveColor,
-                },
-              },
-            },
-            body: {
-              style: {
-                // Time/timestamp text color
-                color: propsTheme.chatbot?.inactiveColor,
-              },
-            },
-            footer: {
-              style: {
-                borderTopColor: propsTheme.chatbot?.borderColor,
-              },
-              textArea: {
-                style: {
-                  color: propsTheme.chatbot?.inactiveColor,
-                  backgroundColor: propsTheme.chatbot?.backgroundColor,
-                },
-                '::placeholder': {
-                  color: propsTheme.chatbot?.inactiveColor,
-                },
-              },
-              submitButton: {
-                style: {
-                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-                },
-              },
-              speechInputButton: {
-                style: {
-                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-                },
-              },
-            },
-          },
-          botMessage: {
-            backgroundColor: propsTheme.botMessage?.backgroundColor,
-            color: propsTheme.botMessage?.color,
-            linkColor: propsTheme.botMessage?.backgroundColor 
-              ? darkenColor(propsTheme.botMessage.backgroundColor, 0.2)
-              : undefined,
-            unsentBackgroundColor: propsTheme.botMessage?.backgroundColor 
-              ? `color-mix(in srgb, ${propsTheme.botMessage.backgroundColor} 20%, transparent)`
-              : undefined,
-            quickReplyBackgroundColor: propsTheme.botMessage?.backgroundColor 
-              ? `color-mix(in srgb, ${propsTheme.botMessage.backgroundColor} 20%, transparent)`
-              : undefined,
-          },
-          userMessage: {
-            backgroundColor: propsTheme.userMessage?.backgroundColor,
-            color: propsTheme.userMessage?.color,
-          },
-          template: {
-            quickReplies: {
-              button: {
-                style: {
-                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-                  borderColor: propsTheme.chatbot?.borderColor,
-                  backgroundColor: propsTheme.botMessage?.backgroundColor
-                    ? `${propsTheme.botMessage.backgroundColor}33`
-                    : undefined,
-                },
-              },
-            },
-            time: {
-              style: {
-                color: propsTheme.chatbot?.inactiveColor,
-              },
-            },
-            TextMessageTemplate: {
-              style: {
-                // For unset messages
-                color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-              },
-            },
-            HintMessageTemplate: {
-              style: {
-                color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-              },
-            },
-            ButtonMessageTemplate: {
-              button: {
-                style: {
-                  borderColor: propsTheme.chatbot?.primaryComponent?.mainColor,
-                  backgroundColor: propsTheme.chatbot?.primaryComponent?.mainColor,
-                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-                },
-              },
-            },
-            CarouselMessageTemplate: {
-              card: {
-                style: {
-                  backgroundColor: propsTheme.botMessage?.carouselButtonBackgroundColor,
-                },
-                button: {
-                  style: {
-                    borderColor: propsTheme.chatbot?.primaryComponent?.mainColor,
-                    backgroundColor: propsTheme.chatbot?.primaryComponent?.mainColor,
-                    color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
-                  },
-                },
-              },
-            },
-          },
-        });
-        
-        return deepMerge(tempTheme, transformedPropsTheme);
-      }
-
-      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

@@ -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;
-}