@asgard-js/react 0.0.32 → 0.0.33-canary.1

package/dist/models/bot-provider.d.ts

@@ -1,4 +1,4 @@
-import { ClientConfig } from '@asgard-js/core';
+import { ClientConfig } from '../../../core/src/index.ts';
 
 export type BotProviderMetadataResponse = {
     name: string;

package/dist/utils/deep-merge.d.ts

@@ -1,3 +1,3 @@
 export declare function isObject(item: unknown): item is Record<string, unknown>;
-export declare function deepMerge<T extends object, U extends object>(target: T, source: U): T & U;
+export declare function deepMerge<T extends Record<string, unknown>, U extends Record<string, unknown>>(target: T, source: U): T & U;
 //# sourceMappingURL=deep-merge.d.ts.map

package/dist/utils/deep-merge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAEvE;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC1D,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,GACR,CAAC,GAAG,CAAC,CAeP"}
+{"version":3,"file":"deep-merge.d.ts","sourceRoot":"","sources":["../../src/utils/deep-merge.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAEvE;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5F,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,GACR,CAAC,GAAG,CAAC,CAkBP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.32",
+  "version": "0.0.33-canary.1",
   "publishConfig": {
     "access": "public"
   },
@@ -54,7 +54,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.0.32",
+    "@asgard-js/core": "^0.0.33-canary.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/chatbot/chatbot-body/chatbot-body.tsx

@@ -1,9 +1,9 @@
 import { ReactNode, useEffect, useMemo } from 'react';
-import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
 import styles from './chatbot-body.module.scss';
 import { ConversationMessageRenderer } from './conversation-message-renderer';
 import { BotTypingPlaceholder } from '../../templates';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 import clsx from 'clsx';
 
 export function ChatbotBody(): ReactNode {

package/src/components/chatbot/chatbot-container/chatbot-container.tsx

@@ -1,8 +1,8 @@
 import { PropsWithChildren, ReactNode, useRef, CSSProperties } from 'react';
-import { useUpdateVh } from 'src/hooks';
+import { useUpdateVh } from '../../../hooks';
 import { ChatbotFullScreenContainer } from './chatbot-full-screen-container';
 import classes from './chatbot-container.module.scss';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 import clsx from 'clsx';
 
 interface ChatbotContainerProps extends PropsWithChildren {

package/src/components/chatbot/chatbot-container/chatbot-full-screen-container.tsx

@@ -5,9 +5,9 @@ import {
   useOnScreenKeyboardScrollFix,
   usePreventOverScrolling,
   useViewportSize,
-} from 'src/hooks';
+} from '../../../hooks';
 import classes from './chatbot-container.module.scss';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 
 export function ChatbotFullScreenContainer(
   props: PropsWithChildren

package/src/components/chatbot/chatbot-footer/chatbot-footer.tsx

@@ -8,12 +8,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
 import styles from './chatbot-footer.module.scss';
-import SendSvg from 'src/icons/send.svg?react';
+import SendSvg from '../../../icons/send.svg?react';
 import { SpeechInputButton } from './speech-input-button';
 import clsx from 'clsx';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 
 export function ChatbotFooter(): ReactNode {
   const { sendMessage, isConnecting } = useAsgardContext();

package/src/components/chatbot/chatbot-footer/speech-input-button.tsx

@@ -10,8 +10,8 @@ import {
   useState,
   CSSProperties,
 } from 'react';
-import MicSvg from 'src/icons/mic.svg?react';
-import StopSvg from 'src/icons/stop.svg?react';
+import MicSvg from '../../../icons/mic.svg?react';
+import StopSvg from '../../../icons/stop.svg?react';
 
 interface SpeechInputButtonProps {
   setValue: Dispatch<SetStateAction<string>>;

package/src/components/chatbot/chatbot-header/chatbot-header.tsx

@@ -1,13 +1,13 @@
 import { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import styles from './chatbot-header.module.scss';
 import { ProfileIcon } from '../profile-icon';
-import RefreshSvg from 'src/icons/refresh.svg?react';
-import CloseSvg from 'src/icons/close.svg?react';
+import RefreshSvg from '../../../icons/refresh.svg?react';
+import CloseSvg from '../../../icons/close.svg?react';
 import {
   useAsgardAppInitializationContext,
   useAsgardThemeContext,
   useAsgardContext,
-} from 'src/context/';
+} from '../../../context/';
 import clsx from 'clsx';
 
 interface ChatbotHeaderProps {

package/src/components/chatbot/chatbot.tsx

@@ -3,7 +3,7 @@ import { ClientConfig, ConversationMessage } from '@asgard-js/core';
 import {
   AsgardThemeContextProvider,
   AsgardThemeContextValue,
-} from 'src/context/asgard-theme-context';
+} from '../../context/asgard-theme-context';
 import {
   AsgardServiceContextProvider,
   AsgardServiceContextValue,
@@ -11,7 +11,7 @@ import {
   AsgardTemplateContextValue,
   AsgardAppInitializationContextProvider,
   AsgardServiceContextProviderProps,
-} from 'src/context';
+} from '../../context';
 import { ChatbotHeader } from './chatbot-header';
 import { ChatbotBody } from './chatbot-body';
 import { ChatbotFooter } from './chatbot-footer';

package/src/components/chatbot/profile-icon.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import ProfileSvg from 'src/icons/profile.svg?react';
+import ProfileSvg from '../../icons/profile.svg?react';
 
 interface ProfileIconProps {
   avatar?: string;

package/src/components/templates/avatar/avatar.tsx

@@ -1,6 +1,6 @@
 import { memo, ReactNode } from 'react';
 import styles from './avatar.module.scss';
-import BotSvg from 'src/icons/bot.svg?react';
+import BotSvg from '../../../icons/bot.svg?react';
 import clsx from 'clsx';
 
 interface AvatarProps {

package/src/components/templates/button-template/button-template.tsx

@@ -3,8 +3,8 @@ import { ReactNode } from 'react';
 import { TemplateBox, TemplateBoxContent } from '../template-box';
 import { Avatar } from '../avatar';
 import { Card } from './card';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 
 interface ButtonTemplateProps {
   message: ConversationBotMessage;

package/src/components/templates/button-template/card.tsx

@@ -11,9 +11,9 @@ import {
   ButtonMessageTemplate,
   CarouselMessageTemplate,
 } from '@asgard-js/core';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { useAsgardTemplateContext } from 'src/context/asgard-template-context';
-import { safeWindowOpen } from 'src/utils/uri-validation';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardTemplateContext } from '../../../context/asgard-template-context';
+import { safeWindowOpen } from '../../../utils/uri-validation';
 import clsx from 'clsx';
 
 interface CardProps {
@@ -107,7 +107,7 @@ export function Card(props: CardProps): ReactNode {
         <h5 className={styles.card_title}>{template?.title}</h5>
         <div className={styles.card_description}>{template?.text}</div>
         <div className={styles.card_actions}>
-          {template?.buttons?.map((btn, index) => (
+          {template?.buttons?.map((btn: { label: string; action: ButtonAction }, index: number) => (
             <button
               key={index}
               onClick={handleClick(btn.action)}

package/src/components/templates/carousel-template/carousel-template.tsx

@@ -6,10 +6,11 @@ import { Card } from '../button-template/card';
 import {
   CarouselMessageTemplate,
   ConversationBotMessage,
+  ButtonMessageTemplate,
 } from '@asgard-js/core';
 import { Time } from '../time';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 
 interface CarouselTemplateProps {
   message: ConversationBotMessage;
@@ -33,7 +34,7 @@ export function CarouselTemplate(props: CarouselTemplateProps): ReactNode {
       <Avatar avatar={avatar} />
       <TemplateBoxContent quickReplies={template.quickReplies}>
         <div className={styles.carousel_root}>
-          {template.columns?.map((column, index) => (
+          {template.columns?.map((column: Omit<ButtonMessageTemplate, 'type' | 'quickReplies'>, index: number) => (
             <Card
               key={index}
               template={column}

package/src/components/templates/chart-template/chart-template.tsx

@@ -1,14 +1,13 @@
 import { ReactNode, useMemo, useState, CSSProperties } from 'react';
 import { TemplateBox, TemplateBoxContent } from '../template-box';
 import { Avatar } from '../avatar';
-import { ConversationBotMessage } from '@asgard-js/core';
+import { ConversationBotMessage, ChartMessageTemplate } from '@asgard-js/core';
 import { Time } from '../time';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { ChartMessageTemplate } from '../../../../../core/src';
+import { useAsgardContext } from '../../../context/asgard-service-context';
 import { VegaLite, VisualizationSpec } from 'react-vega';
 import clsx from 'clsx';
 import classes from './chart-template.module.scss';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 
 interface ChartTemplateProps {
   message: ConversationBotMessage;
@@ -29,9 +28,9 @@ export function ChartTemplate(props: ChartTemplateProps): ReactNode {
 
   const spec = useMemo(
     () =>
-      (template?.chartOptions?.find((item) => item.type === option)?.spec ??
+      (template?.chartOptions?.find((item: { type: string; title: string; spec: Record<string, unknown> }) => item.type === option)?.spec ??
         options[0].spec) as VisualizationSpec,
-    [option, template.chartOptions]
+    [option, template.chartOptions, options]
   );
 
   const styles = useMemo<CSSProperties>(
@@ -56,7 +55,7 @@ export function ChartTemplate(props: ChartTemplateProps): ReactNode {
       </div>
       {options.length > 1 && (
         <div className={classes.quick_replies_box}>
-          {options.map((option) => (
+          {options.map((option: { type: string; title: string; spec: Record<string, unknown> }) => (
             <button
               key={option.type}
               className={classes.quick_reply}

package/src/components/templates/hint-template/hint-template.tsx

@@ -1,12 +1,12 @@
 import { ReactNode, useCallback } from 'react';
 import classes from './hint-template.module.scss';
-import { formatTime } from 'src/utils';
+import { formatTime } from '../../../utils';
 import {
   ConversationErrorMessage,
   ConversationMessage,
   MessageTemplateType,
 } from '@asgard-js/core';
-import { useAsgardTemplateContext, useAsgardThemeContext } from 'src/context';
+import { useAsgardTemplateContext, useAsgardThemeContext } from '../../../context';
 import clsx from 'clsx';
 
 interface HintTemplateProps {

package/src/components/templates/image-template/image-template.tsx

@@ -2,11 +2,10 @@ import { ReactNode, useState } from 'react';
 import { TemplateBox, TemplateBoxContent } from '../template-box';
 import { Avatar } from '../avatar';
 import styles from './image-template.module.scss';
-import { ConversationBotMessage } from '@asgard-js/core';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
-import { ImageMessageTemplate } from '../../../../../core/src';
-import CloseSvg from 'src/icons/close.svg?react';
+import { ConversationBotMessage, ImageMessageTemplate } from '@asgard-js/core';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import CloseSvg from '../../../icons/close.svg?react';
 
 interface ImageTemplateProps {
   message: ConversationBotMessage;
@@ -37,6 +36,7 @@ export function ImageTemplate(props: ImageTemplateProps): ReactNode {
       </div>
     );
   }
+
   return (
     <TemplateBox
       className="asgard-image-template"
@@ -50,7 +50,7 @@ export function ImageTemplate(props: ImageTemplateProps): ReactNode {
         time={message.time}
       >
         <div className={styles.image_box} onClick={() => setIsFullScreen(true)}>
-          <img src={previewImageUrl} alt="Message image" />
+          <img src={previewImageUrl} alt="Conversation content" />
         </div>
       </TemplateBoxContent>
     </TemplateBox>

package/src/components/templates/quick-replies/quick-replies.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useCallback } from 'react';
 import styles from './quick-replies.module.scss';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 import clsx from 'clsx';
 
 interface QuickRepliesProps {

package/src/components/templates/text-template/bot-typing-box.tsx

@@ -1,12 +1,12 @@
 import { CSSProperties, ReactNode, useCallback, useMemo, useRef } from 'react';
-import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
 import clsx from 'clsx';
 import { TemplateBox, TemplateBoxContent } from '../template-box';
 import { Avatar } from '../avatar';
-import { useDebounce, useResizeObserver } from 'src/hooks';
+import { useDebounce, useResizeObserver } from '../../../hooks';
 import classes from './text-template.module.scss';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
-import { useMarkdownRenderer } from './use-react-markdown-renderer';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import { useMarkdownRenderer } from '../../../hooks/use-react-markdown-renderer';
 interface BotTypingBoxProps {
   isTyping: boolean;
   typingText: string | null;

package/src/components/templates/text-template/bot-typing-placeholder.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useMemo } from 'react';
 import { BotTypingBox } from './bot-typing-box';
-import { useAsgardContext } from 'src/context/asgard-service-context';
+import { useAsgardContext } from '../../../context/asgard-service-context';
 
 interface BotTypingPlaceholderProps {
   placeholder: string;

package/src/components/templates/text-template/text-template.tsx

@@ -5,9 +5,9 @@ import { TemplateBox, TemplateBoxContent } from '../template-box';
 import classes from './text-template.module.scss';
 import { Avatar } from '../avatar';
 import { Time } from '../time';
-import { useAsgardContext } from 'src/context/asgard-service-context';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
-import { useMarkdownRenderer } from './use-react-markdown-renderer';
+import { useAsgardContext } from '../../../context/asgard-service-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
+import { useMarkdownRenderer } from '../../../hooks/use-react-markdown-renderer';
 
 interface TextTemplateProps {
   message: ConversationMessage;

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

@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useMarkdownRenderer, manageCacheSize, MAX_CACHE_SIZE } from './use-react-markdown-renderer';
+import { useMarkdownRenderer, manageCacheSize, MAX_CACHE_SIZE } from '../../../hooks/use-react-markdown-renderer';
 import { AsgardTemplateContextProvider } from '../../../context/asgard-template-context';
 
 describe('useMarkdownRenderer - Simple Tests', () => {
@@ -23,7 +23,7 @@ describe('useMarkdownRenderer - Simple Tests', () => {
   });
 
   it('should handle null input safely', () => {
-    const { result } = renderHook(() => useMarkdownRenderer(null as any));
+    const { result } = renderHook(() => useMarkdownRenderer(null));
 
     expect(result.current.htmlBlocks).toBeDefined();
     expect(result.current.lastTypingText).toBe('');
@@ -658,7 +658,7 @@ a_{m1} & a_{m2} & \\cdots & a_{mn}
       const mathText = 'Cached math: $E = mc^2$';
       
       // First render
-      const { result: result1 } = renderHook(() => useMarkdownRenderer(mathText, 0));
+      renderHook(() => useMarkdownRenderer(mathText, 0));
       await new Promise(resolve => setTimeout(resolve, 100));
       
       // Second render should be faster (cached)
@@ -679,7 +679,7 @@ a_{m1} & a_{m2} & \\cdots & a_{mn}
     });
 
     it('should not evict entries when cache is below limit', () => {
-      const cache = new Map<string, any>();
+      const cache = new Map<string, string>();
       cache.set('key1', 'value1');
       cache.set('key2', 'value2');
       
@@ -691,7 +691,7 @@ a_{m1} & a_{m2} & \\cdots & a_{mn}
     });
 
     it('should evict oldest entry when cache reaches MAX_CACHE_SIZE', () => {
-      const cache = new Map<string, any>();
+      const cache = new Map<string, string>();
       
       // Fill cache to exactly MAX_CACHE_SIZE
       for (let i = 0; i < MAX_CACHE_SIZE; i++) {
@@ -710,7 +710,7 @@ a_{m1} & a_{m2} & \\cdots & a_{mn}
     });
 
     it('should implement LRU eviction strategy correctly', () => {
-      const cache = new Map<string, any>();
+      const cache = new Map<string, string>();
       
       // Fill cache to MAX_CACHE_SIZE
       for (let i = 0; i < MAX_CACHE_SIZE; i++) {
@@ -732,7 +732,7 @@ a_{m1} & a_{m2} & \\cdots & a_{mn}
     });
 
     it('should handle empty cache gracefully', () => {
-      const cache = new Map<string, any>();
+      const cache = new Map<string, string>();
       
       manageCacheSize(cache);
       
@@ -740,7 +740,7 @@ a_{m1} & a_{m2} & \\cdots & a_{mn}
     });
 
     it('should handle cache with exactly MAX_CACHE_SIZE entries', () => {
-      const cache = new Map<string, any>();
+      const cache = new Map<string, string>();
       
       // Fill cache to exactly MAX_CACHE_SIZE
       for (let i = 0; i < MAX_CACHE_SIZE; i++) {

package/src/components/templates/time/time.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, useMemo } from 'react';
-import { formatTime } from 'src/utils';
+import { formatTime } from '../../../utils';
 import styles from './time.module.scss';
 import clsx from 'clsx';
-import { useAsgardThemeContext } from 'src/context/asgard-theme-context';
+import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
 
 interface TimeProps {
   time?: Date;

package/src/context/asgard-app-initialization-context.tsx

@@ -7,10 +7,10 @@ import React, {
   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';
+import { getBotProviderModels } from '../models/bot-provider';
+import { useDeepCompareMemo } from '../hooks';
+import { deepMerge } from '../utils/deep-merge';
+import { extractRefs } from '../utils/extractors';
 
 type AsyncInitializers = {
   [key: string]: () => Promise<unknown>;

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

@@ -18,7 +18,7 @@ import {
   useChannel,
   UseChannelProps,
   UseChannelReturn,
-} from 'src/hooks';
+} from '../hooks';
 
 export interface AsgardServiceContextValue {
   avatar?: string;

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

@@ -17,7 +17,7 @@ export interface AsgardTemplateContextValue {
     }: {
       sse: {
         sendMessage: (
-          payload: Pick<FetchSsePayload, 'text' | 'payload'>
+          payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>
         ) => void;
       };
     }
@@ -42,7 +42,7 @@ interface AsgardTemplateContextProviderProps extends PropsWithChildren {
     }: {
       sse: {
         sendMessage: (
-          payload: Pick<FetchSsePayload, 'text' | 'payload'>
+          payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>
         ) => void;
       };
     }

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

@@ -7,11 +7,11 @@ import {
   useMemo,
   useCallback,
 } from 'react';
-import { deepMerge } from 'src/utils/deep-merge';
+import { deepMerge } from '../utils/deep-merge';
 import {
   useAsgardAppInitializationContext,
   Annotations,
-} from 'src/context/asgard-app-initialization-context';
+} from './asgard-app-initialization-context';
 
 export interface AsgardThemeContextValue {
   chatbot: Pick<
@@ -257,7 +257,7 @@ export function AsgardThemeContextProvider(
           userMessage: {},
         };
 
-      const tempTheme = deepMerge(defaultAsgardThemeContextValue, {
+      const tempTheme = deepMerge(defaultAsgardThemeContextValue as unknown as Record<string, unknown>, {
         chatbot: {
           backgroundColor: themeFromAnnotations.chatbot?.backgroundColor,
           borderColor: themeFromAnnotations.chatbot?.borderColor,

package/src/hooks/index.ts

@@ -8,4 +8,4 @@ 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';
+export * from './use-react-markdown-renderer';

package/src/hooks/use-channel.ts

@@ -12,7 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export interface UseChannelProps {
   defaultIsOpen?: boolean;
-  resetPayload?: Pick<FetchSsePayload, 'text' | 'payload'>;
+  resetPayload?: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>;
   client: AsgardServiceClient | null;
   customChannelId: string;
   customMessageId?: string;
@@ -30,8 +30,8 @@ export interface UseChannelReturn {
   isResetting: boolean;
   isConnecting: boolean;
   conversation: Conversation | null;
-  sendMessage?: (payload: Pick<FetchSsePayload, 'text' | 'payload'>) => void;
-  resetChannel?: (payload?: Pick<FetchSsePayload, 'text' | 'payload'>) => void;
+  sendMessage?: (payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) => void;
+  resetChannel?: (payload?: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) => void;
   closeChannel?: () => void;
 }
 
@@ -61,7 +61,7 @@ export function useChannel(props: UseChannelProps): UseChannelReturn {
   const [conversation, setConversation] = useState<Conversation | null>(null);
 
   const resetChannel = useCallback(
-    async (payload?: Pick<FetchSsePayload, 'text' | 'payload'>) => {
+    async (payload?: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) => {
       const conversation = new Conversation({
         messages: new Map(
           initMessages?.map((message) => [message.messageId, message])
@@ -106,7 +106,7 @@ export function useChannel(props: UseChannelProps): UseChannelReturn {
   );
 
   const closeChannel = useCallback(() => {
-    setChannel((prevChannel) => {
+    setChannel((prevChannel: Channel | null) => {
       prevChannel?.close();
 
       return null;
@@ -118,9 +118,9 @@ export function useChannel(props: UseChannelProps): UseChannelReturn {
   }, []);
 
   const sendMessage = useCallback(
-    (payload: Pick<FetchSsePayload, 'text' | 'payload'>) =>
-      channel?.sendMessage(payload),
-    [channel]
+    (payload: Pick<FetchSsePayload, 'text'> & Partial<Pick<FetchSsePayload, 'payload'>>) =>
+      channel?.sendMessage({ ...payload, customMessageId }),
+    [channel, customMessageId]
   );
 
   useEffect(() => {