@asgard-js/react 0.0.40 → 0.0.41-canary.2

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

package/src/hooks/use-is-on-screen-keyboard-open.ts

@@ -1,43 +0,0 @@
-import { useEffect, useState } from 'react';
-
-function isKeyboardInput(elem: HTMLElement): boolean {
-  return (
-    (['INPUT', 'TEXTAREA'].includes(elem.tagName) &&
-      !['button', 'submit', 'checkbox', 'file', 'image'].includes(
-        (elem as HTMLInputElement).type
-      )) ||
-    elem.hasAttribute('contenteditable')
-  );
-}
-
-export function useIsOnScreenKeyboardOpen(): boolean {
-  const [isOpen, setOpen] = useState(false);
-
-  useEffect(() => {
-    function handleFocusIn(e: FocusEvent): void {
-      if (!e.target) return;
-
-      const target = e.target as HTMLElement;
-
-      if (isKeyboardInput(target)) setOpen(true);
-    }
-
-    function handleFocusOut(e: FocusEvent): void {
-      if (!e.target) return;
-
-      const target = e.target as HTMLElement;
-
-      if (isKeyboardInput(target)) setOpen(false);
-    }
-
-    document.addEventListener('focusin', handleFocusIn);
-    document.addEventListener('focusout', handleFocusOut);
-
-    return (): void => {
-      document.removeEventListener('focusin', handleFocusIn);
-      document.removeEventListener('focusout', handleFocusOut);
-    };
-  }, []);
-
-  return isOpen;
-}

package/src/hooks/use-on-screen-keyboard-scroll-fix.ts

@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-
-export function useOnScreenKeyboardScrollFix(): void {
-  useEffect(() => {
-    function handleScroll(): void {
-      window.scrollTo(0, 0);
-    }
-
-    window.addEventListener('scroll', handleScroll);
-
-    return (): void => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-}

package/src/hooks/use-prevent-over-scrolling.ts

@@ -1,77 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-function findNearestScrollContainer(
-  elem: HTMLElement
-): HTMLElement | undefined {
-  if (elem.scrollHeight > elem.offsetHeight) {
-    return elem;
-  }
-
-  const parent = elem.parentElement;
-  if (!parent) {
-    return undefined;
-  }
-
-  return findNearestScrollContainer(parent);
-}
-
-export function usePreventOverScrolling(ref: RefObject<HTMLDivElement>): void {
-  useEffect(() => {
-    const elem = ref.current;
-
-    if (!elem) return;
-
-    let startTouch: Touch | undefined = undefined;
-
-    function handleTouchStart(e: TouchEvent): void {
-      if (e.touches.length !== 1) return;
-
-      startTouch = e.touches[0];
-    }
-
-    function handleTouchMove(e: TouchEvent): void {
-      if (e.touches.length !== 1 || !startTouch) return;
-
-      const deltaY = startTouch.pageY - e.targetTouches[0].pageY;
-      const deltaX = startTouch.pageX - e.targetTouches[0].pageX;
-
-      if (Math.abs(deltaX) > Math.abs(deltaY)) return;
-
-      const target = e.target as HTMLElement;
-      const nearestScrollContainer = findNearestScrollContainer(target);
-
-      if (!nearestScrollContainer) {
-        e.preventDefault();
-
-        return;
-      }
-
-      const isScrollingUp = deltaY < 0;
-      const isAtTop = nearestScrollContainer.scrollTop === 0;
-      if (isScrollingUp && isAtTop) {
-        e.preventDefault();
-
-        return;
-      }
-
-      const isAtBottom =
-        nearestScrollContainer.scrollTop ===
-        nearestScrollContainer.scrollHeight -
-          nearestScrollContainer.clientHeight;
-
-      if (!isScrollingUp && isAtBottom) {
-        e.preventDefault();
-
-        return;
-      }
-    }
-
-    elem.addEventListener('touchstart', handleTouchStart);
-    elem.addEventListener('touchmove', handleTouchMove);
-
-    return (): void => {
-      elem.removeEventListener('touchstart', handleTouchStart);
-      elem.removeEventListener('touchmove', handleTouchMove);
-    };
-  }, [ref]);
-}

package/src/hooks/use-react-markdown-renderer.tsx

@@ -1,278 +0,0 @@
-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 '../components/templates/text-template/text-template.module.scss';
-import { useAsgardTemplateContext } from '../context/asgard-template-context';
-import { useAsgardThemeContext } from '../context/asgard-theme-context';
-import { safeWindowOpen } from '../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 }: React.ComponentProps<'table'>): 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 }: React.ComponentProps<'code'>): ReactNode => {
-  return (
-    <code className={`hljs ${className || ''}`} {...props}>
-      {children}
-    </code>
-  );
-};
-
-// Custom link renderer to integrate defaultLinkTarget prop and theme colors
-const LinkRenderer = ({ children, href, ...props }: React.ComponentProps<'a'>): ReactNode => {
-  const { defaultLinkTarget } = useAsgardTemplateContext();
-  const { botMessage } = useAsgardThemeContext();
-
-  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" 
-      style={{ 
-        color: botMessage?.linkColor || '#0066cc',
-        textDecoration: 'underline',
-        ...props.style 
-      }}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-};
-
-// Custom math renderers for inline and block math expressions
-const InlineMathRenderer = ({ children, ...props }: React.ComponentProps<'span'>): ReactNode => (
-  <span className="math math-inline" {...props}>
-    {children}
-  </span>
-);
-
-const BlockMathRenderer = ({ children, ...props }: React.ComponentProps<'div'>): 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 }: React.ComponentProps<'div'>): 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}
-        >
-          {props.children}
-        </BlockMathRenderer>
-      );
-    }
-
-    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/hooks/use-resize-observer.tsx

@@ -1,27 +0,0 @@
-import { RefObject, useEffect } from 'react';
-
-interface UseResizeObserverProps {
-  ref: RefObject<HTMLDivElement>;
-  onResize: (width: number, height: number) => void;
-}
-
-export function useResizeObserver(props: UseResizeObserverProps): void {
-  const { ref, onResize } = props;
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        onResize(width, height);
-      }
-    });
-
-    if (ref.current) {
-      resizeObserver.observe(ref.current);
-    }
-
-    return (): void => {
-      resizeObserver.disconnect();
-    };
-  }, [ref, onResize]);
-}

package/src/hooks/use-update-vh.ts

@@ -1,30 +0,0 @@
-import { RefObject, useCallback, useEffect, useLayoutEffect } from 'react';
-
-const useBrowserLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : null;
-
-export function useUpdateVh(ref: RefObject<HTMLDivElement>): void {
-  const updateVh = useCallback(() => {
-    const vh = window.innerHeight * 0.01;
-    if (ref.current) {
-      ref.current.style.setProperty('--vh', `${vh}px`);
-    }
-  }, [ref]);
-
-  useBrowserLayoutEffect?.(updateVh, [updateVh]);
-
-  useEffect(() => {
-    function effectTwice(): void {
-      updateVh();
-      setTimeout(updateVh, 1000);
-    }
-
-    updateVh();
-
-    window.addEventListener('resize', effectTwice);
-
-    return (): void => {
-      window.removeEventListener('resize', effectTwice);
-    };
-  }, [updateVh]);
-}