@developer_tribe/react-native-comnyx 0.3.2 → 0.3.4

package/src/components/MessageInput.tsx

@@ -1,21 +1,17 @@
-import {
-  StyleSheet,
-  TextInput,
-  View,
-  Image,
-  TouchableOpacity,
-} from 'react-native';
+import { TextInput, View, Image, TouchableOpacity } from 'react-native';
 import { useAppStore } from '../store';
 import { useState } from 'react';
 import { sendCustomerMessage } from '../api';
 import { useThemeColors } from '../hooks/useThemeColors';
+import { ScaledSheet } from './ScaledSheet';
 
-const sendDark = require('../assets/send.png');
+const sendDark = require('../assets/arrow-right.png');
 
 export function MessageInput({
   scrollToBottom,
 }: {
   scrollToBottom: (animated: boolean) => void;
+  selectedMessage?: string;
 }) {
   const [value, setValue] = useState('');
   const customer = useAppStore((s) => s.customer!);
@@ -39,34 +35,65 @@ export function MessageInput({
       ]);
       sendCustomerMessage(customer.external_id, value, {
         fake: useAppStore.getState().fake,
-      }).then((res) => {
-        const data = useAppStore.getState().data;
-        if (data) {
-          const itemIndex = data.findIndex(
-            (item) =>
-              item.id === null &&
-              new Date(item.created_at).getTime() === date.getTime()
-          );
-          if (itemIndex === -1) {
-            //TODO:??
+      })
+        .then((res) => {
+          const data = useAppStore.getState().data;
+          if (data) {
+            const itemIndex = data.findIndex(
+              (item) =>
+                item.id === null &&
+                new Date(item.created_at).getTime() === date.getTime()
+            );
+            if (itemIndex === -1) {
+              //TODO:??
+            } else {
+              const alteredData = [...data];
+              alteredData[itemIndex] = {
+                id: res.message.id,
+                content: res.message.content,
+                user: res.message.user ?? alteredData[itemIndex]?.user,
+                created_at: new Date(res.message.created_at),
+                approved: true,
+              };
+              useAppStore.setState({
+                data: alteredData,
+              });
+              scrollToBottom(false);
+            }
           } else {
-            const alteredData = [...data];
-            alteredData[itemIndex] = {
-              id: res.message.id,
-              content: res.message.content,
-              user: res.message.user ?? alteredData[itemIndex]?.user,
-              created_at: new Date(res.message.created_at),
-              approved: true,
-            };
-            useAppStore.setState({
-              data: alteredData,
-            });
-            scrollToBottom(false);
+            //TODO: ??
           }
-        } else {
-          //TODO: ??
-        }
-      });
+        })
+        .catch(() => {
+          const data = useAppStore.getState().data;
+          if (data) {
+            const itemIndex = data.findIndex(
+              (item) =>
+                item.id === null &&
+                new Date(item.created_at).getTime() === date.getTime()
+            );
+            if (itemIndex === -1) {
+              //TODO:??
+            } else {
+              const alteredData = [...data];
+              alteredData[itemIndex] = {
+                ...alteredData[itemIndex],
+                id: alteredData[itemIndex]?.id ?? null,
+                content: alteredData[itemIndex]?.content ?? '',
+                created_at: alteredData[itemIndex]?.created_at ?? new Date(),
+                approved: alteredData[itemIndex]?.approved ?? false,
+                user: alteredData[itemIndex]?.user ?? null,
+                error: true,
+              };
+              useAppStore.setState({
+                data: alteredData,
+              });
+              scrollToBottom(false);
+            }
+          } else {
+            //TODO: ??
+          }
+        });
       setValue('');
     }
   };
@@ -80,6 +107,8 @@ export function MessageInput({
         onChangeText={(newValue) => setValue(newValue)}
         onSubmitEditing={sendMessage}
         returnKeyType="send"
+        multiline={true}
+        maxLength={1000}
         style={[
           styles.textInput,
           {
@@ -92,11 +121,14 @@ export function MessageInput({
         placeholderTextColor={themeColors.text + '80'}
       />
       <TouchableOpacity
-        style={[styles.sendButton, { backgroundColor: themeColors.primary }]}
+        style={[
+          styles.sendButton,
+          { backgroundColor: themeColors.dark_background },
+        ]}
         onPress={sendMessage}
       >
         <Image
-          style={[styles.sendIcon, { tintColor: themeColors.text }]}
+          style={[styles.sendIcon, { tintColor: themeColors.light_text }]}
           source={sendDark}
         />
       </TouchableOpacity>
@@ -104,30 +136,35 @@ export function MessageInput({
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   container: {
     flexDirection: 'row',
-    padding: 10,
-    borderTopWidth: 1,
+    paddingHorizontal: '10@s',
+    paddingVertical: '10@vs',
+    alignItems: 'center',
+    position: 'relative',
+    zIndex: 1,
   },
   textInput: {
     flex: 1,
     borderWidth: 1,
-    borderRadius: 20,
-    paddingHorizontal: 15,
-    paddingVertical: 8,
-    marginRight: 10,
-    fontSize: 16,
+    borderRadius: '20@s',
+    paddingHorizontal: '15@s',
+    marginRight: '10@s',
+    fontSize: '16@vs',
+    paddingVertical: '10@vs',
+    minHeight: 40,
+    maxHeight: 190,
   },
   sendButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: '40@s',
+    height: '40@vs',
+    borderRadius: '20@vs',
     justifyContent: 'center',
     alignItems: 'center',
   },
   sendIcon: {
-    width: 20,
-    height: 20,
+    width: '20@vs',
+    height: '20@vs',
   },
 });

package/src/components/MessageItem.tsx

@@ -1,13 +1,34 @@
-import { View, Image } from 'react-native';
+import { View, Image, TouchableOpacity } from 'react-native';
 import { AppText } from './AppText';
 import type { AppConversationMessage } from '../types/Conversation';
-import { StyleSheet } from 'react-native';
 import { useThemeColors } from '../hooks/useThemeColors';
+import { useState, useRef, useEffect } from 'react';
+import { ScaledSheet } from './ScaledSheet';
 
-const clockIcon = require('../assets/clock.png');
-const doubleCheckIcon = require('../assets/double-check.png');
+const clockIcon = require('../assets/iconamoon_clock-fill.png');
+const infoIcon = require('../assets/info-circle.png');
 
-export function MessageItem({ item }: { item: AppConversationMessage }) {
+interface TextLine {
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  text: string;
+}
+
+interface MessageLayout {
+  lines: number;
+  lastLineWidth: number;
+  totalWidth: number;
+}
+
+export function MessageItem({
+  item,
+  onShowPopup,
+}: {
+  item: AppConversationMessage;
+  onShowPopup: () => void;
+}) {
   const themeColors = useThemeColors();
   const isDeviceOwner = !!item.user;
   const formattedDate = new Date(item.created_at).toLocaleTimeString([], {
@@ -15,73 +36,144 @@ export function MessageItem({ item }: { item: AppConversationMessage }) {
     minute: '2-digit',
   });
 
+  const layoutRef = useRef<MessageLayout>({
+    lines: 0,
+    lastLineWidth: 0,
+    totalWidth: 0,
+  });
+
+  const [layoutComplete, setLayoutComplete] = useState(false);
+
+  const renderFooterContent = () => {
+    if (isDeviceOwner && item.error) {
+      return <Image source={infoIcon} style={styles.infoIcon} />;
+    } else if (isDeviceOwner && !item.error && !item.approved) {
+      return <Image source={clockIcon} style={styles.clockIcon} />;
+    } else {
+      return (
+        <AppText
+          style={[
+            styles.timestamp,
+            isDeviceOwner
+              ? styles.rightTimestamp
+              : [styles.leftTimestamp, { color: themeColors.text }],
+          ]}
+        >
+          {formattedDate}
+        </AppText>
+      );
+    }
+  };
+
+  const onTextLayout = (event: any) => {
+    const { lines } = event.nativeEvent;
+
+    const numLines = lines.length;
+    let lastLineWidth = 0;
+    let totalWidth = 0;
+
+    if (numLines >= 1) {
+      // Get the width of the last line
+      lastLineWidth = lines[numLines - 1].width;
+      // Use the widest line as the total width
+      totalWidth = Math.max(...lines.map((line: TextLine) => line.width));
+    }
+
+    layoutRef.current = {
+      lines: numLines,
+      lastLineWidth,
+      totalWidth,
+    };
+
+    if (!layoutComplete) {
+      setLayoutComplete(true);
+    }
+  };
+
+  useEffect(() => {
+    setLayoutComplete(false);
+  }, [item.content]);
+
+  // Check if there's enough space for the timestamp
+  const hasSpaceInLastLine =
+    layoutRef.current.lines >= 1 &&
+    layoutRef.current.lastLineWidth < layoutRef.current.totalWidth * 0.8;
+
+  // A single line message with enough space for the timestamp
+  const isSingleLineWithSpace =
+    layoutRef.current.lines === 1 &&
+    layoutRef.current.lastLineWidth < layoutRef.current.totalWidth * 0.8;
+
+  // For multi-line messages, check if the last line has space
+  const isMultiLineWithSpace =
+    layoutRef.current.lines > 1 && hasSpaceInLastLine;
+
+  const shouldShowInlineFooter = isSingleLineWithSpace || isMultiLineWithSpace;
+
   return (
-    <View
+    <TouchableOpacity
       key={item.id}
       style={[
         styles.messageItem,
         isDeviceOwner ? styles.rightMessage : styles.leftMessage,
       ]}
+      activeOpacity={isDeviceOwner && item.error ? 0.8 : 1}
+      onPress={() => {
+        isDeviceOwner && item.error ? onShowPopup() : {};
+      }}
     >
       <View
         style={[
           styles.messageBubble,
           isDeviceOwner
-            ? [styles.rightBubble, { backgroundColor: themeColors.primary }]
-            : [styles.leftBubble, { backgroundColor: themeColors.border }],
+            ? [styles.rightBubble, { backgroundColor: themeColors.light_green }]
+            : [styles.leftBubble, { backgroundColor: themeColors.ghost }],
         ]}
       >
-        <AppText
-          style={[
-            styles.messageText,
-            isDeviceOwner
-              ? styles.rightMessageText
-              : [styles.leftMessageText, { color: themeColors.text }],
-          ]}
+        <View
+          style={
+            shouldShowInlineFooter
+              ? styles.inlineContainer
+              : styles.multiLineContainer
+          }
         >
-          {item.content}
-        </AppText>
-        <View style={styles.footer}>
           <AppText
             style={[
-              styles.timestamp,
+              styles.messageText,
               isDeviceOwner
-                ? styles.rightTimestamp
-                : [styles.leftTimestamp, { color: themeColors.text }],
+                ? styles.rightMessageText
+                : [styles.leftMessageText, { color: themeColors.text }],
             ]}
+            onTextLayout={onTextLayout}
           >
-            {formattedDate}
+            {item.content}
           </AppText>
-          {!item.approved ? (
-            <Image
-              source={clockIcon}
-              style={[
-                styles.clockIcon,
-                isDeviceOwner
-                  ? styles.rightClockIcon
-                  : [styles.leftClockIcon, { tintColor: themeColors.text }],
-              ]}
-            />
-          ) : (
-            <Image
-              source={doubleCheckIcon}
+
+          {shouldShowInlineFooter && (
+            <View
               style={[
-                styles.clockIcon,
-                isDeviceOwner
-                  ? styles.rightClockIcon
-                  : [styles.leftClockIcon, { tintColor: themeColors.text }],
+                styles.inlineFooter,
+                layoutRef.current.lines > 1 &&
+                  hasSpaceInLastLine &&
+                  styles.lastLineFooter,
               ]}
-            />
+            >
+              {renderFooterContent()}
+            </View>
           )}
         </View>
+
+        {!shouldShowInlineFooter && (
+          <View style={styles.footer}>{renderFooterContent()}</View>
+        )}
       </View>
-    </View>
+    </TouchableOpacity>
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   messageItem: {
-    marginVertical: 5,
+    marginVertical: '5@vs',
     maxWidth: '80%',
     minHeight: 60,
     minWidth: 100,
@@ -93,8 +185,9 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   messageBubble: {
-    padding: 12,
-    borderRadius: 20,
+    paddingVertical: '12@vs',
+    paddingHorizontal: '12@s',
+    borderRadius: '20@vs',
   },
   leftBubble: {
     borderTopLeftRadius: 4,
@@ -102,40 +195,70 @@ const styles = StyleSheet.create({
   rightBubble: {
     borderTopRightRadius: 4,
   },
+  inlineContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  multiLineContainer: {
+    flexDirection: 'column',
+  },
   messageText: {
-    fontSize: 16,
+    fontSize: '16@vs',
+    flexShrink: 1,
   },
   leftMessageText: {
     color: '#000000',
   },
   rightMessageText: {
-    color: '#FFFFFF',
+    color: '#000000',
   },
   footer: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-end',
     alignItems: 'center',
-    marginTop: 4,
+    marginTop: '4@vs',
+  },
+  inlineFooter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: '8@s',
+  },
+  secondLineFooter: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    backgroundColor: 'transparent',
+  },
+  lastLineFooter: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    backgroundColor: 'transparent',
   },
   timestamp: {
-    fontSize: 12,
+    fontSize: '10@vs',
     opacity: 0.7,
   },
   leftTimestamp: {
     color: '#666666',
   },
   rightTimestamp: {
-    color: '#FFFFFF',
+    color: '#000000',
   },
   clockIcon: {
-    width: 12,
-    height: 12,
-    marginLeft: 4,
+    width: '12@vs',
+    height: '12@vs',
+    marginLeft: '4@s',
+    tintColor: '#000000',
   },
-  leftClockIcon: {
-    tintColor: '#666666',
+  infoIcon: {
+    width: '12@vs',
+    height: '12@vs',
+    marginLeft: '4@s',
   },
-  rightClockIcon: {
-    tintColor: '#FFFFFF',
+  iconContainer: {
+    paddingVertical: '5@vs',
+    paddingHorizontal: '5@vs',
   },
 });

package/src/components/ScaledSheet.ts

@@ -0,0 +1,93 @@
+import {
+  type ImageStyle,
+  StyleSheet,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import deepMap from '../utils/deepMap';
+import { s, vs, ms, mvs } from '../utils/scalingUtils';
+const validScaleSheetRegex =
+  /^(-?\d+(?:\.\d{1,3})?)@(mv?s(\d+(?:\.\d{1,2})?)?|s|vs)r?$/;
+
+type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
+
+const scaleByAnnotation =
+  (
+    scale: (size: number) => number,
+    verticalScale: (size: number) => number,
+    moderateScale: (size: number, factor?: number) => number,
+    moderateVerticalScale: (size: number, factor?: number) => number
+  ) =>
+  (value: string | number): string | number => {
+    if (typeof value !== 'string' || !validScaleSheetRegex.test(value)) {
+      return value;
+    }
+
+    // Type assertion for regex result
+    const regexExecResult = validScaleSheetRegex.exec(value);
+    if (!regexExecResult) {
+      return value;
+    }
+
+    // Safely extract matched groups
+    const sizeStr = regexExecResult[1] || '0';
+    const size = parseFloat(sizeStr);
+    const scaleFunc = regexExecResult[2] || '';
+
+    // Extract scale factor if present
+    let scaleFactor: number | undefined;
+    let scaleFuncName = scaleFunc;
+
+    // Handle ms and mvs cases which may have a factor
+    if (scaleFunc.startsWith('ms') || scaleFunc.startsWith('mvs')) {
+      const matchResult = /^(ms|mvs)(\d+(?:\.\d{1,2})?)$/.exec(scaleFunc);
+      if (matchResult && matchResult[1] && matchResult[2]) {
+        scaleFuncName = matchResult[1];
+        scaleFactor = parseFloat(matchResult[2]);
+      }
+    }
+
+    const shouldRound = value.endsWith('r');
+
+    let result: number;
+
+    switch (scaleFuncName) {
+      case 's':
+        result = scale(size);
+        break;
+      case 'vs':
+        result = verticalScale(size);
+        break;
+      case 'ms':
+        result = moderateScale(size, scaleFactor);
+        break;
+      case 'mvs':
+        result = moderateVerticalScale(size, scaleFactor);
+        break;
+      default:
+        return value;
+    }
+
+    return shouldRound ? Math.round(result) : result;
+  };
+
+type ScaledSheetType = any;
+
+const scaledSheetCreator = (
+  scale: (size: number) => number,
+  verticalScale: (size: number) => number,
+  moderateScale: (size: number, factor?: number) => number,
+  moderateVerticalScale: (size: number, factor?: number) => number
+): ScaledSheetType => {
+  const scaleFunc = scaleByAnnotation(
+    scale,
+    verticalScale,
+    moderateScale,
+    moderateVerticalScale
+  );
+  return {
+    create: (styleSheet: NamedStyles<any>) =>
+      StyleSheet.create(deepMap(styleSheet, scaleFunc) as NamedStyles<any>),
+  };
+};
+export const ScaledSheet = scaledSheetCreator(s, vs, ms, mvs);

package/src/components/SizeMatter.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useAppStore } from '../store';
+
+interface ISizeMatter {
+  baseWidth: number;
+  baseHeight: number;
+}
+
+export function SizeMatter({ baseWidth = 390, baseHeight = 844 }: ISizeMatter) {
+  const { updateBaseDimensions } = useAppStore((s) => ({
+    updateBaseDimensions: s.updateBaseDimensions,
+  }));
+
+  useEffect(() => {
+    updateBaseDimensions({
+      baseWidth,
+      baseHeight,
+    });
+  }, [baseHeight, baseWidth, updateBaseDimensions]);
+
+  return <></>;
+}

package/src/index.tsx

@@ -2,3 +2,4 @@ import './__dev__';
 export { registerComnyx } from './register';
 export type { CreateCustomerRequest } from './types/Customer';
 export { Comnyx } from './App';
+export { SizeMatter } from './components/SizeMatter';

package/src/store.ts

@@ -8,6 +8,8 @@ import type { AppConversationMessage } from './types/Conversation';
 import type { LanguageCode } from './types/Language';
 
 interface AppStoreState {
+  baseHeight: number;
+  baseWidth: number;
   initialized: boolean;
   customer: Customer | null;
   data: AppConversationMessage[] | null;
@@ -27,9 +29,15 @@ interface AppStoreState {
   setLanguage: (language: LanguageCode) => void;
   setTheme: (theme: 'light' | 'dark') => void;
   setFake: (fake: boolean) => void;
+  updateBaseDimensions: (config: {
+    baseHeight: number;
+    baseWidth: number;
+  }) => void;
 }
 
 const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
+  baseWidth: 390,
+  baseHeight: 844,
   initialized: false,
   customer: null,
   data: null,
@@ -60,6 +68,9 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
   setFake: (fake: boolean) => {
     set({ fake });
   },
+  updateBaseDimensions: ({ baseWidth, baseHeight }) => {
+    set({ baseWidth, baseHeight });
+  },
 });
 
 export const useAppStore = createWithEqualityFn<AppStoreState>()(
@@ -70,15 +81,14 @@ export const useAppStore = createWithEqualityFn<AppStoreState>()(
     partialize: (state) => ({
       customer: state.customer,
       externalId: state.externalId,
-      data: [],
-      /*  data: state.data
+      data: state.data
         ?.filter((message) => message.approved)
         .map((message) => ({
           ...message,
           created_at: message.created_at
             ? new Date(message.created_at)
             : undefined,
-        })),*/
+        })),
     }),
   }),
   shallow

package/src/types/Conversation.ts

@@ -10,6 +10,8 @@ export interface AppConversationMessage
   id: number | null;
   approved?: boolean;
   created_at: Date;
+  error?: boolean;
+  resending?: boolean;
 }
 
 export interface ConversationPage {