react-native-chatbot-ai 0.1.51 → 0.1.53

package/lib/typescript/src/components/Drawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,aAAa,+CAqFlB,CAAC;AAUF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Drawer/DrawerContent.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,aAAa,+CAuFlB,CAAC;AAUF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/components/chat/item/ChatAIAnswerMessageItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatAIAnswerMessageItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/item/ChatAIAnswerMessageItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAqB9C,UAAU,4BAA4B;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmPD,QAAA,MAAM,uBAAuB,GAAI,mBAG9B,4BAA4B,4CAyG9B,CAAC;AACF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ChatAIAnswerMessageItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/item/ChatAIAnswerMessageItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA2B9C,UAAU,4BAA4B;IACpC,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA4QD,QAAA,MAAM,uBAAuB,GAAI,mBAG9B,4BAA4B,4CA0G9B,CAAC;AACF,eAAe,uBAAuB,CAAC"}

package/lib/typescript/src/components/chat/item/ChatTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/item/ChatTable.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,UAAU;IAClB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAMD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiEnC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ChatTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/chat/item/ChatTable.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,UAAU,UAAU;IAClB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AASD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA6GnC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/src/components/product/Card.d.ts

@@ -0,0 +1,9 @@
+interface IProductCardProps {
+    productId?: string;
+    messageId?: string;
+    index?: number;
+    showSensitiveInfo?: boolean;
+}
+declare const ProductCardWrapper: import("react").MemoExoticComponent<(props: IProductCardProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default ProductCardWrapper;
+//# sourceMappingURL=Card.d.ts.map

package/lib/typescript/src/components/product/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/components/product/Card.tsx"],"names":[],"mappings":"AAwBA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,QAAA,MAAM,kBAAkB,8CAAgB,iBAAiB,oDASvD,CAAC;AAkXH,eAAe,kBAAkB,CAAC"}

package/lib/typescript/src/components/product/CardHorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHorizontal.d.ts","sourceRoot":"","sources":["../../../../../src/components/product/CardHorizontal.tsx"],"names":[],"mappings":"AAsBA,UAAU,2BAA2B;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,4BAA4B,8CACxB,2BAA2B,oDAUpC,CAAC;AA8UF,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"CardHorizontal.d.ts","sourceRoot":"","sources":["../../../../../src/components/product/CardHorizontal.tsx"],"names":[],"mappings":"AAsBA,UAAU,2BAA2B;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,4BAA4B,8CACxB,2BAA2B,oDAUpC,CAAC;AAySF,eAAe,4BAA4B,CAAC"}

package/lib/typescript/src/translation/resources/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AAwDA,wBAEE"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../../src/translation/resources/i18n.ts"],"names":[],"mappings":";;;AA4DA,wBAEE"}

package/lib/typescript/src/utils/common.d.ts

@@ -6,5 +6,8 @@ interface ShortenOptions {
     keepEnd?: number;
 }
 export declare const shortenFileName: (name: string, options?: ShortenOptions) => string;
+export declare const COMPONENT_REGEX: RegExp;
+export declare const COMPONENT_GLOBAL_REGEX: RegExp;
+export declare const parseProductParams: (raw?: string) => Record<string, string>;
 export {};
 //# sourceMappingURL=common.d.ts.map

package/lib/typescript/src/utils/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,GAAG,GAAG,EAAE,GAAG,GAAG,YAC4B,CAAC;AAEtE,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAU9C,CAAC;AAEF,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,GAAG,GAAG,EAAE,GAAG,GAAG,YAC4B,CAAC;AAEtE,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAU9C,CAAC;AAEF,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,EAAE,UAAS,cAAmB,WAkBzE,CAAC;AAEF,eAAO,MAAM,eAAe,QAA+C,CAAC;AAC5E,eAAO,MAAM,sBAAsB,QACU,CAAC;AAE9C,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAWtE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-chatbot-ai",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "description": "React Native library for Chatbot AI",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Drawer/DrawerContent.tsx

@@ -34,10 +34,12 @@ const DrawerContent = () => {
 
   const onSearchCallback = useCallback(
     (isSuccess?: boolean) => {
-      logGA(GAEvents.sidebarSearchConversationSend, {
-        content: debouncedSearchTerm,
-        search_result: isSuccess ? 'yes' : null,
-      });
+      if (debouncedSearchTerm?.trim?.().length > 0) {
+        logGA(GAEvents.sidebarSearchConversationSend, {
+          content: debouncedSearchTerm,
+          search_result: isSuccess ? 'yes' : null,
+        });
+      }
     },
     [logGA, debouncedSearchTerm]
   );

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

@@ -19,6 +19,7 @@ import {
 } from 'react-native-marked';
 import { useSearchProduct } from '../../../hooks/product/useSearchProduct';
 import ProductHorizontalCard from '../../product/CardHorizontal';
+import ProductCard from '../../product/Card';
 import ChatTable from './ChatTable';
 import DeeplinkItem from './DeeplinkItem';
 import { useChatContext } from '../../../context/ChatContext';
@@ -26,6 +27,11 @@ import { trans } from '../../../translation';
 import MessageActionsBar from './MessageActionsBar';
 import useProductsStore from '../../../store/products';
 import ShimmerBlock from './ShimmerBlock';
+import {
+  COMPONENT_GLOBAL_REGEX,
+  COMPONENT_REGEX,
+  parseProductParams,
+} from '../../../utils/common';
 
 interface ChatAIAnswerMessageItemProps {
   item: IMessageItem;
@@ -51,22 +57,47 @@ class CustomRenderer extends Renderer implements RendererInterface {
   productIds?: string[];
 
   html(text: string): ReactNode {
-    const match = /^<!--\s*@component:(\w+)\(id:([\w-]+)\)\s*-->/.exec(text);
-    switch (match?.[1]) {
+    const normalized = text?.trim?.();
+    const match = COMPONENT_REGEX.exec(normalized);
+    console.log('match:', match);
+    if (!match) {
+      return (
+        <KLabel.Text typo="TextMdNormal" key={this.getKey()}>
+          {text}
+        </KLabel.Text>
+      );
+    }
+    const component = match?.[1];
+    const params = parseProductParams(match?.[2]);
+    switch (component) {
       case 'product':
-        const productIndex = this.productIds?.indexOf(match?.[2] || '');
-        return (
-          <ProductHorizontalCard
-            productId={match?.[2]}
-            key={this.getKey()}
-            messageId={this.messageId}
-            index={productIndex}
-          />
-        );
+        const productId = params?.id;
+        const type = params?.type ?? 'horizontal';
+        const productIndex = this.productIds?.indexOf(productId || '');
+        console.log('product params:', params, 'type:', type);
+        if (type === 'vertical') {
+          return (
+            <ProductCard
+              productId={productId}
+              key={this.getKey()}
+              messageId={this.messageId}
+              index={productIndex}
+            />
+          );
+        } else {
+          return (
+            <ProductHorizontalCard
+              productId={productId}
+              key={this.getKey()}
+              messageId={this.messageId}
+              index={productIndex}
+            />
+          );
+        }
       default:
         return (
           <KLabel.Text typo="TextMdNormal" key={this.getKey()}>
-            {match?.[2] || ''}
+            {text}
           </KLabel.Text>
         );
     }
@@ -293,14 +324,15 @@ const ChatAIAnswerMessageItem = ({
     }
 
     if (typeof content !== 'string') return [];
-
-    const regex =
-      /<!--\s*@component:product\([^)]*id:\s*['"]?([\w-]+)['"]?[^)]*\)\s*-->/g;
     const ids: string[] = [];
     let match;
-    while ((match = regex.exec(content)) !== null) {
-      if (match[1]) {
-        ids.push(match[1]);
+    while ((match = COMPONENT_GLOBAL_REGEX.exec(content)) !== null) {
+      const componentName = match?.[1];
+      if (componentName !== 'product') continue;
+      const params = parseProductParams(match?.[2]);
+      const productId = params?.id;
+      if (productId) {
+        ids.push(productId);
       }
     }
     return ids;

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

@@ -1,11 +1,10 @@
 import {
   KColors,
   KContainer,
-  KDims,
   KRadiusValue,
   KSpacingValue,
 } from '@droppii/libs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 
 interface TableProps {
@@ -20,6 +19,9 @@ const toArray = (
   node: React.ReactNode | React.ReactNode[]
 ): React.ReactNode[] => (Array.isArray(node) ? node : [node]);
 
+const HEADER_CELL_MAX_WIDTH = 165;
+const COLUMN_CELL_MAX_WIDTH = 220;
+
 const ChatTable: React.FC<TableProps> = ({
   header,
   rows,
@@ -27,6 +29,42 @@ const ChatTable: React.FC<TableProps> = ({
   rowStyle,
   cellStyle,
 }) => {
+  const columnWidthRef = React.useRef<Record<number, number>>({});
+  const [columnWidths, setColumnWidths] = useState<Record<number, number>>({});
+
+  const layoutCountRef = React.useRef(0);
+  const expectedLayoutCountRef = React.useRef(0);
+
+  const onCellLayout = (colIndex: number, width: number) => {
+    const prev = columnWidthRef.current[colIndex] ?? 0;
+
+    if (width > prev) {
+      columnWidthRef.current[colIndex] = width;
+    }
+
+    layoutCountRef.current += 1;
+
+    if (
+      layoutCountRef.current >= expectedLayoutCountRef.current &&
+      expectedLayoutCountRef.current > 0
+    ) {
+      setColumnWidths({ ...columnWidthRef.current });
+    }
+  };
+
+  useEffect(() => {
+    const headerCount = header?.length ?? 0;
+    const rowCount =
+      rows?.reduce((sum, row) => sum + (row?.length ?? 0), 0) ?? 0;
+
+    expectedLayoutCountRef.current = headerCount + rowCount;
+
+    // reset trước mỗi lần render mới
+    layoutCountRef.current = 0;
+    columnWidthRef.current = {};
+    setColumnWidths({});
+  }, [header, rows]);
+
   return (
     <ScrollView
       horizontal
@@ -44,7 +82,11 @@ const ChatTable: React.FC<TableProps> = ({
                   styles.headerCell,
                   j < header.length - 1 && styles.borderRight,
                   j === 0 && styles.firstCell,
+                  columnWidths?.[j] && { width: columnWidths[j] },
                 ]}
+                onLayout={(e: any) => {
+                  onCellLayout(j, e?.nativeEvent?.layout?.width);
+                }}
               >
                 {toArray(cell).map((child, k) => (
                   <React.Fragment key={`header-cell-${j}-${k}`}>
@@ -71,7 +113,11 @@ const ChatTable: React.FC<TableProps> = ({
                   styles.cell,
                   j < (row?.length || 0) - 1 && styles.borderRight,
                   j === 0 && styles.firstCell,
+                  columnWidths?.[j] && { width: columnWidths[j] },
                 ]}
+                onLayout={(e: any) => {
+                  onCellLayout(j, e?.nativeEvent?.layout?.width);
+                }}
               >
                 {toArray(cell).map((child, k) => (
                   <React.Fragment key={`cell-${i}-${j}-${k}`}>
@@ -110,20 +156,20 @@ const styles = StyleSheet.create({
     padding: 8,
     borderBottomWidth: 1,
     borderColor: KColors.hexToRgba(KColors.gray.dark, 0.2),
-    width: KDims.width * 0.8,
+    maxWidth: COLUMN_CELL_MAX_WIDTH,
   },
   cell: {
     padding: 8,
     borderBottomWidth: 1,
     borderColor: KColors.hexToRgba(KColors.gray.dark, 0.2),
-    width: KDims.width * 0.8,
+    maxWidth: COLUMN_CELL_MAX_WIDTH,
   },
   borderRight: {
     borderRightWidth: 1,
     borderColor: KColors.hexToRgba(KColors.gray.dark, 0.2),
   },
   firstCell: {
-    width: 160,
+    maxWidth: HEADER_CELL_MAX_WIDTH,
   },
   headerText: {
     fontWeight: 'bold',