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

package/src/components/templates/text-template/use-react-markdown-renderer.tsx

@@ -0,0 +1,264 @@
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
+import classes from './text-template.module.scss';
+import { useAsgardTemplateContext } from 'src/context/asgard-template-context';
+import { safeWindowOpen } from 'src/utils/uri-validation';
+
+interface MarkdownRenderResult {
+  htmlBlocks: ReactNode;
+  lastTypingText: string;
+}
+
+type Token = {
+  raw: string;
+  type: string;
+};
+
+// Maximum number of cached markdown blocks to prevent memory leaks
+export const MAX_CACHE_SIZE = 100;
+
+// Helper function to manage cache size with LRU eviction
+export function manageCacheSize(cache: Map<string, ReactNode>): void {
+  if (cache.size >= MAX_CACHE_SIZE) {
+    // Remove the first (oldest) entry to make room for new ones
+    const firstKey = cache.keys().next().value;
+    if (firstKey) {
+      cache.delete(firstKey);
+    }
+  }
+}
+
+// Enhanced completion detection with math expression support
+function isCompleteParagraph(raw: string): boolean {
+  // Basic completion logic - must end with proper punctuation or newlines
+  // OR contain complete markdown elements
+  const hasMarkdownElements =
+    /^(#{1,6}\s|>\s|[-*+]\s|\d+\.\s|---+|```|\|.*\|)/m.test(raw.trim());
+
+  // Check for complete table structure (header row + separator + at least one data row)
+  const hasCompleteTable = /\|.*\|\s*\n\s*\|[-:\s|]+\|\s*\n\s*\|.*\|/m.test(
+    raw.trim()
+  );
+
+  const basicCompletion =
+    raw.endsWith('\n\n') ||
+    raw.endsWith('\n') ||
+    raw.endsWith('.') ||
+    raw.endsWith('。') ||
+    raw.endsWith('！') ||
+    raw.endsWith('!') ||
+    raw.endsWith('?') ||
+    hasMarkdownElements || // Has complete markdown elements
+    hasCompleteTable; // Has complete table structure
+
+  // Math-specific completion detection
+  // Check for complete math patterns (properly closed with $..$ or $$..$$)
+  const completeInlineMath = /\$[^$\s][^$]*\$/.test(raw);
+  const completeBlockMath = /\$\$[^$]*\$\$/.test(raw);
+  const hasCompleteMath = completeInlineMath || completeBlockMath;
+
+  const mathCompletion =
+    !raw.includes('$') || // No math expressions
+    hasCompleteMath; // Has complete math and no incomplete math
+
+  // Complete if: (basic completion AND math completion) OR complete block math
+  // OR if it's just a single token without newlines (treat as complete)
+  const isSimpleToken = !raw.includes('\n\n') && raw.trim().length > 0;
+
+  return (
+    (basicCompletion && mathCompletion) || (isSimpleToken && mathCompletion)
+  );
+}
+
+// Custom table renderer to maintain current styling
+const TableRenderer = ({ children, ...props }: any): ReactNode => (
+  <div className={classes.table_container}>
+    <table {...props}>{children}</table>
+  </div>
+);
+
+// Custom code renderer to maintain highlight.js classes exactly
+const CodeRenderer = ({ children, className, ...props }: any): ReactNode => {
+  return (
+    <code className={`hljs ${className || ''}`} {...props}>
+      {children}
+    </code>
+  );
+};
+
+// Custom link renderer to integrate defaultLinkTarget prop
+const LinkRenderer = ({ children, href, ...props }: any): ReactNode => {
+  const { defaultLinkTarget } = useAsgardTemplateContext();
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      if (href) {
+        safeWindowOpen(href, defaultLinkTarget || '_blank');
+      }
+    },
+    [href, defaultLinkTarget]
+  );
+
+  return (
+    <a href={href} onClick={handleClick} rel="noopener noreferrer" {...props}>
+      {children}
+    </a>
+  );
+};
+
+// Custom math renderers for inline and block math expressions
+const InlineMathRenderer = ({ children, ...props }: any): ReactNode => (
+  <span className="math math-inline" {...props}>
+    {children}
+  </span>
+);
+
+const BlockMathRenderer = ({ children, ...props }: any): ReactNode => (
+  <div className="math math-display" {...props}>
+    {children}
+  </div>
+);
+
+// Component renderers that maintain current styling and behavior
+const components = {
+  table: TableRenderer,
+  code: CodeRenderer,
+  a: LinkRenderer,
+  math: InlineMathRenderer, // Inline math: $expression$
+  div: ({ className, ...props }: any): ReactNode => {
+    // Block math: $$expression$$
+    // Check for KaTeX display math classes
+    if (
+      className?.includes('math-display') ||
+      className?.includes('katex-display')
+    ) {
+      return (
+        <BlockMathRenderer
+          className={`math math-display ${className || ''}`}
+          {...props}
+        />
+      );
+    }
+
+    return <div className={className} {...props} />;
+  },
+};
+
+export function useMarkdownRenderer(
+  markdownText: string,
+  delay = 100
+): MarkdownRenderResult {
+  const [blocks, setBlocks] = useState<ReactNode[]>([]);
+  const [typingText, setTypingText] = useState<string>('');
+
+  const cacheRef = useRef<Map<string, ReactNode>>(new Map());
+
+  const getRawText = useCallback((text: string): string => {
+    return text || '';
+  }, []);
+
+  // Mimic the exact token-based logic from current implementation
+  const parseToTokens = useCallback((text: string): Token[] => {
+    if (!text) return [];
+
+    // Simple tokenization - split by double newlines for paragraphs
+    // If there are no double newlines, treat the entire text as one token
+    const paragraphs = text.includes('\n\n') ? text.split(/\n\s*\n/) : [text];
+
+    return paragraphs.map((p) => ({
+      raw: p + (text.includes('\n\n') ? '\n\n' : ''),
+      type: 'paragraph',
+    }));
+  }, []);
+
+  useEffect(() => {
+    if (!markdownText) {
+      setBlocks([]);
+      setTypingText('');
+      cacheRef.current.clear();
+
+      return;
+    }
+
+    const handler = setTimeout(() => {
+      const tokens = parseToTokens(markdownText);
+      if (tokens.length === 0) {
+        setBlocks([]);
+        setTypingText('');
+
+        return;
+      }
+
+      // Find the last complete token
+      let lastCompleteIndex = -1;
+
+      for (let i = tokens.length - 1; i >= 0; i--) {
+        const raw = getRawText(tokens[i].raw);
+        if (isCompleteParagraph(raw)) {
+          lastCompleteIndex = i;
+
+          break;
+        }
+      }
+
+      const finishedTokens = tokens.slice(0, lastCompleteIndex + 1);
+      const unprocessedTokens = tokens.slice(lastCompleteIndex + 1);
+
+      const newBlocks: ReactNode[] = [];
+
+      for (const token of finishedTokens) {
+        const raw = getRawText(token.raw);
+        const blockInCache = cacheRef.current.get(raw);
+        if (blockInCache) {
+          newBlocks.push(blockInCache);
+        } else {
+          const reactElement = (
+            <ReactMarkdown
+              key={raw}
+              remarkPlugins={[remarkGfm, remarkMath]}
+              rehypePlugins={[rehypeHighlight, rehypeKatex]}
+              components={components}
+            >
+              {raw.trim()}
+            </ReactMarkdown>
+          );
+          // Manage cache size before adding new entry
+          manageCacheSize(cacheRef.current);
+          cacheRef.current.set(raw, reactElement);
+          newBlocks.push(reactElement);
+        }
+      }
+
+      const lastRaw = unprocessedTokens
+        .map((t) => getRawText(t.raw))
+        .join('\n')
+        .trim();
+      setBlocks(newBlocks);
+      setTypingText(lastRaw);
+    }, delay);
+
+    return (): void => clearTimeout(handler);
+  }, [markdownText, delay, getRawText, parseToTokens]);
+
+  const htmlBlocks = useMemo<ReactNode>(() => {
+    return <div className={classes.md_container}>{blocks}</div>;
+  }, [blocks]);
+
+  return {
+    htmlBlocks,
+    lastTypingText: typingText,
+  };
+}

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 'src/utils';
+import styles from './time.module.scss';
+import clsx from 'clsx';
+import { useAsgardThemeContext } from 'src/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 'src/models/bot-provider';
+import { useDeepCompareMemo } from 'src/hooks';
+import { deepMerge } from 'src/utils/deep-merge';
+import { extractRefs } from 'src/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,139 @@
+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 'src/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;
+}
+
+export const AsgardServiceContext = createContext<AsgardServiceContextValue>({
+  avatar: undefined,
+  client: null,
+  isOpen: false,
+  isResetting: false,
+  isConnecting: false,
+  messages: null,
+  messageBoxBottomRef: { current: null },
+  botTypingPlaceholder: undefined,
+});
+
+export interface AsgardServiceContextProviderProps {
+  children: ReactNode;
+  parentRef?: ForwardedRef<
+    Partial<{ serviceContext?: AsgardServiceContextValue }>
+  >;
+  avatar?: string;
+  config: ClientConfig;
+  botTypingPlaceholder?: string;
+  customChannelId: string;
+  customMessageId?: string;
+  delayTime?: number;
+  initMessages?: ConversationMessage[];
+  onSseMessage?: UseChannelProps['onSseMessage'];
+}
+
+export function AsgardServiceContextProvider(
+  props: AsgardServiceContextProviderProps
+): ReactNode {
+  const {
+    avatar,
+    children,
+    parentRef,
+    config,
+    botTypingPlaceholder,
+    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,
+      messageBoxBottomRef,
+    }),
+    [
+      avatar,
+      client,
+      isOpen,
+      isResetting,
+      isConnecting,
+      conversation?.messages,
+      sendMessage,
+      resetChannel,
+      closeChannel,
+      botTypingPlaceholder,
+    ]
+  );
+
+  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' | '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' | '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);
+}