react-native-chatbot-ai 0.1.19 → 0.1.22

package/src/components/chat/footer/item/UploadImageItem.tsx

@@ -9,6 +9,9 @@ import { ImageUpload } from '..';
 import { StyleSheet } from 'react-native';
 import { useImageUpload } from '../../../../hooks/upload/useImageUpload';
 import UIUtils from '../../../../utils/ui';
+import { useChatContext } from '../../../../context/ChatContext';
+import { GAEvents } from '../../../../constants/events';
+import useSessionStore from '../../../../store/session';
 
 interface Props {
   item: ImageUpload;
@@ -17,9 +20,10 @@ interface Props {
 }
 
 const UploadImageItem = ({ item, onSuccess, onRemove }: Props) => {
+  const logGA = useChatContext().logGA;
   const { isSuccess, isUploading, progress } = useImageUpload({
     file: item,
-    onSuccess: (data: any) => {
+    onSuccess: (data: any, duration?: number) => {
       const mItem = {
         ...item,
         remoteUrl: data?.[0]?.publicUrl,
@@ -27,6 +31,14 @@ const UploadImageItem = ({ item, onSuccess, onRemove }: Props) => {
       };
       if (mItem.remoteUrl) {
         onSuccess?.(mItem);
+        logGA(GAEvents.chatDetailMultimodalUpload, {
+          conversation_id: useSessionStore.getState().sessionId,
+          file_type: 'image',
+          duration: duration || 0,
+          size_mb: item.size / 1024 / 1024,
+          status: 'success',
+          format: item.mime,
+        });
       }
     },
     onError: () => {
@@ -35,6 +47,14 @@ const UploadImageItem = ({ item, onSuccess, onRemove }: Props) => {
         theme: 'danger',
       });
       onRemove?.(item);
+      logGA(GAEvents.chatDetailMultimodalUpload, {
+        conversation_id: useSessionStore.getState().sessionId,
+        file_type: 'image',
+        duration: 0,
+        size_mb: item.size / 1024 / 1024,
+        status: 'failed',
+        format: item.mime,
+      });
     },
   });
 

package/src/components/chat/index.tsx

@@ -2,12 +2,8 @@ import { KContainer } from '@droppii/libs';
 import ChatHeader from './ChatHeader';
 import ChatMessageList from './ChatMessageList';
 import ChatFooter from './footer';
-import { KeyboardAvoidingView, Platform, StyleSheet } from 'react-native';
-import type { ComponentType } from 'react';
-
-// Type assertion to fix TypeScript issue with React Native components
-const KeyboardAvoidingViewComponent =
-  KeyboardAvoidingView as unknown as ComponentType<any>;
+import { StyleSheet } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import { useMessage } from '../../hooks/message/useMessage';
 
 const ChatBotAI = () => {
@@ -16,15 +12,16 @@ const ChatBotAI = () => {
   const lastMessage = messageState?.messages?.[0];
 
   return (
-    <KContainer.Page>
-      <KeyboardAvoidingViewComponent
+    <KContainer.Page flex>
+      <KeyboardAvoidingView
         style={styles.container}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        behavior={'padding'}
+        keyboardVerticalOffset={0}
       >
         <ChatHeader />
         <ChatMessageList messageList={messageState?.messages || []} />
         <ChatFooter lastMessage={lastMessage} />
-      </KeyboardAvoidingViewComponent>
+      </KeyboardAvoidingView>
     </KContainer.Page>
   );
 };
@@ -32,5 +29,5 @@ const ChatBotAI = () => {
 export default ChatBotAI;
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
+  container: { flexGrow: 1 },
 });

package/src/components/chat/item/ChatAIAnswerMessageItem.tsx

@@ -21,7 +21,9 @@ import ProductHorizontalCard from '../../product/CardHorizontal';
 import ChatTable from './ChatTable';
 import DeeplinkItem from './DeeplinkItem';
 import { useChatContext } from '../../../context/ChatContext';
-import trans from '../../../translation';
+import { trans } from '../../../translation';
+import MessageActionsBar from './MessageActionsBar';
+import useProductsStore from '../../../store/products';
 
 interface ChatAIAnswerMessageItemProps {
   item: IMessageItem;
@@ -167,20 +169,27 @@ export function useStreamingMarkdownBlocks(text: string) {
 
 class CustomRenderer extends Renderer implements RendererInterface {
   constructor(
-    openImageViewer?: (images: { url: string }[], index: number) => void
+    openImageViewer?: (images: { url: string }[], index: number) => void,
+    messageId?: string
   ) {
     super();
     this.openImageViewer = openImageViewer;
+    this.messageId = messageId;
   }
 
   openImageViewer?: (images: { url: string }[], index: number) => void;
+  messageId?: string;
 
   html(text: string): ReactNode {
     const match = /^<!--\s*@component:(\w+)\(id:([\w-]+)\)\s*-->/.exec(text);
     switch (match?.[1]) {
       case 'product':
         return (
-          <ProductHorizontalCard productId={match?.[2]} key={this.getKey()} />
+          <ProductHorizontalCard
+            productId={match?.[2]}
+            key={this.getKey()}
+            messageId={this.messageId}
+          />
         );
       default:
         return (
@@ -303,7 +312,11 @@ class CustomRenderer extends Renderer implements RendererInterface {
   link(children: string | ReactNode[], href: string, _styles?: any): ReactNode {
     if (href?.startsWith('/@component:deeplink')) {
       return (
-        <DeeplinkItem key={this.getKey()} href={href}>
+        <DeeplinkItem
+          key={this.getKey()}
+          href={href}
+          messageId={this.messageId}
+        >
           {children}
         </DeeplinkItem>
       );
@@ -397,12 +410,37 @@ const ChatAIAnswerMessageItem = ({
 
   const {} = useSearchProduct({ productIds });
 
+  const products = useProductsStore((state) => state.products);
+
   const renderer = useMemo(
-    () => new CustomRenderer(openImageViewer),
-    [openImageViewer]
+    () => new CustomRenderer(openImageViewer, item.id),
+    [openImageViewer, item.id]
   );
   const tokenizer = useMemo(() => new CustomTokenizer(), []);
 
+  // Extract all product images for sharing
+  const productImages = useMemo(() => {
+    if (productIds.length === 0) {
+      return undefined;
+    }
+
+    const images: string[] = [];
+
+    productIds.forEach((productId) => {
+      const product = products.find((p) => p.id === productId);
+
+      if (!product) {
+        return;
+      }
+
+      const imageUrl = product?.images?.['410x410']?.[0]?.url || product?.image;
+      if (imageUrl) {
+        images.push(imageUrl);
+      }
+    });
+    return images.length > 0 ? images : undefined;
+  }, [productIds, products]);
+
   return (
     <KContainer.View style={styles.container}>
       {blocks.map((chunk, index) => (
@@ -420,6 +458,17 @@ const ChatAIAnswerMessageItem = ({
           }}
         />
       ))}
+
+      {/* Message Actions Bar */}
+      <MessageActionsBar
+        messageId={item.id}
+        messageContent={item.content}
+        isVisible={!isStreaming}
+        productImages={productImages}
+        message={item}
+      />
+
+      {/* Disclaimer */}
       <KContainer.VisibleView visible={isLast && !isStreaming}>
         <KLabel.Text
           typo="TextSmNormal"

package/src/components/chat/item/DeeplinkItem.tsx

@@ -1,10 +1,13 @@
 import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { useCallback, useMemo } from 'react';
 import { useChatContext } from '../../../context/ChatContext';
+import { GAEvents } from '../../../constants/events';
+import useSessionStore from '../../../store/session';
 
 interface DeeplinkItemProps {
   children?: React.ReactNode;
   href?: string;
+  messageId?: string;
 }
 
 export function parseDeepLinkHref(href: string): Record<string, string> | null {
@@ -26,8 +29,9 @@ export function parseDeepLinkHref(href: string): Record<string, string> | null {
   return result;
 }
 
-const DeeplinkItem = ({ children, href }: DeeplinkItemProps) => {
+const DeeplinkItem = ({ children, href, messageId }: DeeplinkItemProps) => {
   const pushLinkTo = useChatContext().pushLinkTo;
+  const logGA = useChatContext().logGA;
   const csTeamId = useChatContext().csTeamId;
 
   const linkData = useMemo(() => {
@@ -52,11 +56,35 @@ const DeeplinkItem = ({ children, href }: DeeplinkItemProps) => {
 
   const onPressDeeplink = useCallback(() => {
     if (linkData) {
+      const data = parseDeepLinkHref(href || '');
       pushLinkTo?.(linkData, {
         source_from: 'chatbot',
       });
+      if (data?.type === 'gift') {
+        logGA(GAEvents.chatDetailGiftDetailBtnTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+          gift_id: data?.id,
+        });
+        return;
+      }
+      if (data?.type === 'faq') {
+        logGA(GAEvents.chatDetailFAQTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+          deeplink_id: data?.id,
+        });
+        return;
+      }
+      if (data?.type === 'cx-support') {
+        logGA(GAEvents.chatDetailLivechatBtnTap, {
+          conversation_id: useSessionStore.getState().sessionId,
+          message_id: messageId,
+        });
+        return;
+      }
     }
-  }, [linkData, pushLinkTo]);
+  }, [linkData, pushLinkTo, logGA, href, messageId]);
 
   return (
     <KContainer.Touchable onPress={onPressDeeplink}>

package/src/components/chat/item/MessageActionsBar.tsx

@@ -0,0 +1,326 @@
+/**
+ * MessageActionsBar Component
+ * Main container that orchestrates all action buttons (Like, Dislike, Audio, Copy, Share)
+ */
+
+import React, { useCallback, useMemo, useRef } from 'react';
+import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import {
+  KColors,
+  KSpacingValue,
+  KLabel,
+  KImage,
+  KContainer,
+} from '@droppii/libs';
+import {
+  Menu,
+  MenuTrigger,
+  MenuOption,
+  MenuOptions,
+  renderers,
+} from 'react-native-popup-menu';
+import {
+  useFeedback,
+  useCopyToClipboard,
+  useShareMessage,
+  useAudioPlayer,
+} from '../../../hooks/messageActions';
+import {
+  FeedbackType,
+  LikeReason,
+  DislikeReason,
+} from '../../../types/messageActions';
+import ActionButton from './actions/ActionButton';
+
+const { Popover } = renderers;
+
+import type { IMessageItem } from '../../../types/dto';
+import { useChatContext } from '../../../context/ChatContext';
+import { GAEvents } from '../../../constants/events';
+
+interface MessageActionsBarProps {
+  messageId: string;
+  messageContent: string;
+  isVisible: boolean;
+  productImages?: string[];
+  message?: IMessageItem;
+}
+
+const MessageActionsBar = ({
+  messageId,
+  messageContent,
+  isVisible,
+  productImages,
+  message,
+}: MessageActionsBarProps) => {
+  // Refs
+  const likeMenuRef = useRef(null);
+  const dislikeMenuRef = useRef(null);
+  const logGA = useChatContext().logGA;
+
+  // Hooks
+  const { feedback, isLikeActive, isDislikeActive, selectReason } = useFeedback(
+    messageId,
+    message
+  );
+
+  const { copyToClipboard, isCopying } = useCopyToClipboard();
+  const { shareMessage, isLoading: isSharing } = useShareMessage(
+    messageId,
+    messageContent,
+    productImages
+  );
+  const {
+    isPlaying: isAudioPlaying,
+    isPaused: isAudioPaused,
+    isLoading: isAudioLoading,
+    togglePlayback,
+  } = useAudioPlayer({
+    messageId,
+  });
+
+  // Like reasons menu items
+  const likeReasons = useMemo(() => {
+    return Object.values(LikeReason).map((reason) => ({
+      label: reason,
+      onPress: () => selectReason(FeedbackType.like, reason),
+    }));
+  }, [selectReason]);
+
+  // Dislike reasons menu items
+  const dislikeReasons = useMemo(() => {
+    return Object.values(DislikeReason).map((reason) => ({
+      label: reason,
+      onPress: () => selectReason(FeedbackType.dislike, reason),
+    }));
+  }, [selectReason]);
+
+  // Handlers
+  const handleCopy = useCallback(() => {
+    logGA(GAEvents.chatDetailCopyBtnTap, {
+      message_id: messageId,
+    });
+    copyToClipboard(messageContent);
+  }, [messageContent, copyToClipboard, logGA, messageId]);
+
+  // Audio button states
+  const getAudioButtonProps = useCallback(() => {
+    if (isAudioPlaying) {
+      return {
+        icon: 'pause-o' as const,
+        iconColor: KColors.primary.normal,
+        isActive: true,
+      };
+    }
+
+    if (isAudioPaused) {
+      return {
+        icon: 'play-o' as const,
+        iconColor: KColors.primary.normal,
+        isActive: true,
+      };
+    }
+
+    return {
+      icon: 'volume-up-o' as const,
+      iconColor: KColors.gray.light,
+      isActive: false,
+    };
+  }, [isAudioPlaying, isAudioPaused]);
+
+  const audioButtonProps = getAudioButtonProps();
+
+  if (!isVisible) return null;
+
+  return (
+    <KContainer.View style={styles.container}>
+      {/* Action Buttons Row */}
+      <KContainer.View style={styles.buttonsRow}>
+        {/* Like Button with Menu - Hidden when Dislike is active */}
+        {!isDislikeActive && (
+          <Menu
+            ref={likeMenuRef}
+            renderer={Popover}
+            rendererProps={{
+              placement: 'top',
+              anchorStyle: { display: 'none' },
+            }}
+          >
+            <MenuTrigger
+              disabled={isLikeActive}
+              customStyles={{
+                TriggerTouchableComponent: TouchableWithoutFeedback,
+              }}
+            >
+              <KContainer.View
+                style={[
+                  styles.actionButtonWrapper,
+                  isLikeActive && styles.actionButtonActive,
+                ]}
+              >
+                <KImage.VectorIcons
+                  name="like-thumbup-b"
+                  size={16}
+                  color={
+                    isLikeActive ? KColors.primary.normal : KColors.gray.light
+                  }
+                />
+              </KContainer.View>
+            </MenuTrigger>
+            <MenuOptions optionsContainerStyle={styles.popover}>
+              {likeReasons.map((item) => (
+                <MenuOption
+                  key={item.label}
+                  onSelect={item.onPress}
+                  style={styles.menuItem}
+                  disabled={feedback?.reason === item.label}
+                >
+                  {/* @ts-ignore - KLabel.Text does support children */}
+                  <KLabel.Text
+                    typo="TextMdMedium"
+                    color={
+                      feedback?.reason === item.label
+                        ? KColors.primary.normal
+                        : KColors.gray.dark
+                    }
+                  >
+                    {item.label}
+                  </KLabel.Text>
+                </MenuOption>
+              ))}
+            </MenuOptions>
+          </Menu>
+        )}
+
+        {/* Dislike Button with Menu - Hidden when Like is active */}
+        {!isLikeActive && (
+          <Menu
+            ref={dislikeMenuRef}
+            renderer={Popover}
+            rendererProps={{
+              placement: 'top',
+              anchorStyle: { display: 'none' },
+            }}
+          >
+            <MenuTrigger
+              disabled={isDislikeActive}
+              customStyles={{
+                TriggerTouchableComponent: TouchableWithoutFeedback,
+              }}
+            >
+              <KContainer.View
+                style={[
+                  styles.actionButtonWrapper,
+                  isDislikeActive && styles.actionButtonActive,
+                ]}
+              >
+                <KImage.VectorIcons
+                  name="like-thumbdown-b"
+                  size={16}
+                  color={
+                    isDislikeActive
+                      ? KColors.primary.normal
+                      : KColors.gray.light
+                  }
+                />
+              </KContainer.View>
+            </MenuTrigger>
+            <MenuOptions optionsContainerStyle={styles.popover}>
+              {dislikeReasons.map((item) => (
+                <MenuOption
+                  key={item.label}
+                  onSelect={item.onPress}
+                  style={styles.menuItem}
+                  disabled={feedback?.reason === item.label}
+                >
+                  {/* @ts-ignore - KLabel.Text does support children */}
+                  <KLabel.Text
+                    typo="TextMdMedium"
+                    color={
+                      feedback?.reason === item.label
+                        ? KColors.primary.normal
+                        : KColors.gray.dark
+                    }
+                  >
+                    {item.label}
+                  </KLabel.Text>
+                </MenuOption>
+              ))}
+            </MenuOptions>
+          </Menu>
+        )}
+
+        {/* Audio Button */}
+        <ActionButton
+          icon={audioButtonProps.icon}
+          iconSize={16}
+          iconColor={audioButtonProps.iconColor}
+          isActive={audioButtonProps.isActive}
+          isLoading={isAudioLoading}
+          onPress={togglePlayback}
+          testID="audio-button"
+        />
+
+        {/* Copy Button */}
+        <ActionButton
+          icon="copy-o"
+          iconSize={16}
+          isLoading={isCopying}
+          onPress={handleCopy}
+          testID="copy-button"
+        />
+
+        {/* Share Button */}
+        <ActionButton
+          icon="share-o"
+          iconSize={16}
+          isLoading={isSharing}
+          onPress={shareMessage}
+          testID="share-button"
+        />
+      </KContainer.View>
+    </KContainer.View>
+  );
+};
+
+export default React.memo(MessageActionsBar);
+
+const styles = StyleSheet.create({
+  container: {
+    gap: KSpacingValue['0.5rem'],
+  },
+  buttonsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.75rem'],
+    flexWrap: 'wrap',
+  },
+  actionButtonWrapper: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: KSpacingValue['0.5rem'],
+  },
+  actionButtonActive: {
+    backgroundColor: KColors.hexToRgba(KColors.primary.normal, 0.1),
+  },
+  popover: {
+    backgroundColor: KColors.white,
+    borderRadius: KSpacingValue['0.5rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    shadowColor: KColors.black,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+    minWidth: 200,
+  },
+  menuItem: {
+    paddingVertical: KSpacingValue['0.75rem'],
+    paddingHorizontal: KSpacingValue['1rem'],
+  },
+});

package/src/components/chat/item/actions/ActionButton.tsx

@@ -0,0 +1,65 @@
+/**
+ * ActionButton Component
+ * Reusable button component for all message action types
+ */
+
+import React from 'react';
+import { StyleSheet, ActivityIndicator } from 'react-native';
+import { KContainer, KImage, KColors, KSpacingValue } from '@droppii/libs';
+
+interface ActionButtonProps {
+  icon: string;
+  iconSize?: number;
+  iconColor?: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  testID?: string;
+  accessibilityLabel?: string;
+}
+
+const ActionButton = ({
+  icon,
+  iconSize = 16,
+  iconColor = KColors.gray.light,
+  isActive = false,
+  isLoading = false,
+  disabled = false,
+  onPress,
+  testID,
+  accessibilityLabel,
+}: ActionButtonProps) => {
+  return (
+    <KContainer.Touchable
+      style={[styles.button, isActive && styles.buttonActive]}
+      onPress={onPress}
+      disabled={disabled || isLoading}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || isLoading }}
+    >
+      {isLoading ? (
+        <ActivityIndicator size="small" color={iconColor} />
+      ) : (
+        <KImage.VectorIcons name={icon} size={iconSize} color={iconColor} />
+      )}
+    </KContainer.Touchable>
+  );
+};
+
+export default React.memo(ActionButton);
+
+const styles = StyleSheet.create({
+  button: {
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: KSpacingValue['0.5rem'],
+  },
+  buttonActive: {
+    backgroundColor: KColors.hexToRgba(KColors.primary.normal, 0.1),
+  },
+});