@developer_tribe/react-native-comnyx 0.3.10 → 0.3.12

package/lib/typescript/module/src/App.d.ts

@@ -4,7 +4,8 @@ interface ComnyxProps {
     theme?: 'light' | 'dark';
     fake?: boolean;
     onBack: () => void;
+    themes?: any;
 }
-export declare function Comnyx({ language, theme, fake, onBack, }: ComnyxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Comnyx({ language, theme, fake, onBack, themes, }: ComnyxProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=App.d.ts.map

package/lib/typescript/module/src/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../src/App.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAe,EACf,KAAc,EACd,IAAY,EACZ,MAAM,GACP,EAAE,WAAW,2CAgCb"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../src/App.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE,GAAG,CAAC;CACd;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAe,EACf,KAAc,EACd,IAAY,EACZ,MAAM,EACN,MAAM,GACP,EAAE,WAAW,2CAmCb"}

package/lib/typescript/module/src/components/AppText.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import type { TextProps } from 'react-native';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
+export type FamilyWeight = Record<Weight, string | undefined>;
+export type Weight = 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
 interface AppTextProps extends Omit<TextProps, 'children'> {
     localization?: keyof LocalizationKeys;
     children?: React.ReactNode;
+    family?: Partial<FamilyWeight>;
+    weight?: Weight;
 }
-export declare function AppText({ style, localization, children, ...props }: AppTextProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AppText({ style, localization, children, family, weight, ...props }: AppTextProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=AppText.d.ts.map

package/lib/typescript/module/src/components/AppText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppText.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppText.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE,UAAU,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACxD,YAAY,CAAC,EAAE,MAAM,gBAAgB,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,kDAyBd"}
+{"version":3,"file":"AppText.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppText.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAE9D,MAAM,MAAM,MAAM,GACd,QAAQ,GACR,MAAM,GACN,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,UAAU,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACxD,YAAY,CAAC,EAAE,MAAM,gBAAgB,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAc,EACd,GAAG,KAAK,EACT,EAAE,YAAY,kDA2Cd"}

package/lib/typescript/module/src/components/ChatList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChatList.tsx"],"names":[],"mappings":"AAyCA,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,2CAmmB3D"}
+{"version":3,"file":"ChatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChatList.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,2CAwnB3D"}

package/lib/typescript/module/src/constants/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../../src/constants/translations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,gBAAgB,CAie1D,CAAC"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../../../src/constants/translations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,EAAE,gBAAgB,CAwd1D,CAAC"}

package/lib/typescript/module/src/hooks/useTheme.d.ts

@@ -0,0 +1,3 @@
+import type { GlobalTheme } from '../types/GlobalTheme';
+export declare function useGlobalTheme(): Required<GlobalTheme>;
+//# sourceMappingURL=useTheme.d.ts.map

package/lib/typescript/module/src/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,wBAAgB,cAAc,IAAI,QAAQ,CAAC,WAAW,CAAC,CAGtD"}

package/lib/typescript/module/src/store.d.ts

@@ -11,6 +11,7 @@ interface AppStoreState {
     language: LanguageCode;
     theme: 'light' | 'dark';
     fake: boolean;
+    themes: any;
     firstMessage: AppConversationMessage | null;
     setData: (cb: (prevData: AppConversationMessage[] | null) => AppConversationMessage[] | null) => void;
     setFirstMessage: (message: AppConversationMessage | null) => void;
@@ -21,6 +22,7 @@ interface AppStoreState {
     setLanguage: (language: LanguageCode) => void;
     setTheme: (theme: 'light' | 'dark') => void;
     setFake: (fake: boolean) => void;
+    setThemes: (themes: any) => void;
     updateBaseDimensions: (config: {
         baseHeight: number;
         baseWidth: number;

package/lib/typescript/module/src/store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../../src/store.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,UAAU,aAAa;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,CACP,EAAE,EAAE,CACF,QAAQ,EAAE,sBAAsB,EAAE,GAAG,IAAI,KACtC,sBAAsB,EAAE,GAAG,IAAI,KACjC,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,CAAC,sBAAsB,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;CACZ;AAwCD,eAAO,MAAM,WAAW;;;;;;;;;;EAmBvB,CAAC"}
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../../src/store.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,UAAU,aAAa;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,IAAI,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,CACP,EAAE,EAAE,CACF,QAAQ,EAAE,sBAAsB,EAAE,GAAG,IAAI,KACtC,sBAAsB,EAAE,GAAG,IAAI,KACjC,IAAI,CAAC;IACV,eAAe,EAAE,CAAC,OAAO,EAAE,sBAAsB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,CAAC,sBAAsB,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;CACZ;AA4CD,eAAO,MAAM,WAAW;;;;;;;;;;EAmBvB,CAAC"}

package/lib/typescript/module/src/types/GlobalTheme.d.ts

@@ -0,0 +1,6 @@
+import type { FamilyWeight } from '../components/AppText';
+export type ExtendedBaseTheme = {
+    family?: (code: string) => Partial<FamilyWeight>;
+};
+export type GlobalTheme = ExtendedBaseTheme;
+//# sourceMappingURL=GlobalTheme.d.ts.map

package/lib/typescript/module/src/types/GlobalTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalTheme.d.ts","sourceRoot":"","sources":["../../../../../src/types/GlobalTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-native-comnyx",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "React Native chat component with integrated support panel, enabling real-time customer communication and efficient agent workflow management.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/App.tsx

@@ -13,6 +13,7 @@ interface ComnyxProps {
   theme?: 'light' | 'dark';
   fake?: boolean;
   onBack: () => void;
+  themes?: any;
 }
 
 export function Comnyx({
@@ -20,6 +21,7 @@ export function Comnyx({
   theme = 'dark',
   fake = false,
   onBack,
+  themes,
 }: ComnyxProps) {
   const { initialized, customer } = useAppStore((s) => ({
     initialized: s.initialized,
@@ -31,7 +33,10 @@ export function Comnyx({
     useAppStore.getState().setLanguage(language);
     useAppStore.getState().setTheme(theme);
     useAppStore.getState().setFake(fake);
-  }, [language, theme, fake]);
+    if (themes) {
+      useAppStore.getState().setThemes(themes);
+    }
+  }, [language, theme, fake, themes]);
 
   if (!initialized) {
     return (

package/src/components/AppText.tsx

@@ -4,19 +4,41 @@ import { LocalizationList } from '../constants/translations';
 import { useAppStore } from '../store';
 import { useThemeColors } from '../hooks/useThemeColors';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
+import { useGlobalTheme } from '../hooks/useTheme';
+
+export type FamilyWeight = Record<Weight, string | undefined>;
+
+export type Weight =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900';
 
 interface AppTextProps extends Omit<TextProps, 'children'> {
   localization?: keyof LocalizationKeys;
   children?: React.ReactNode;
+  family?: Partial<FamilyWeight>;
+  weight?: Weight;
 }
 
 export function AppText({
   style,
   localization,
   children,
+  family,
+  weight = '400',
   ...props
 }: AppTextProps) {
   const themeColors = useThemeColors();
+  const theme = useGlobalTheme();
+
   const { language } = useAppStore((s) => ({
     language: s.language,
   }));
@@ -35,8 +57,24 @@ export function AppText({
     return null;
   }
 
+  if (!family && theme.family && language) {
+    family = theme.family(language);
+  }
+
+  const fontFamily = family?.[weight ?? '400'];
+
   return (
-    <Text style={[{ color: themeColors.text }, style]} {...props}>
+    <Text
+      style={[
+        {
+          color: themeColors.text,
+          fontFamily,
+          fontWeight: fontFamily ? undefined : weight || '400',
+        },
+        style,
+      ]}
+      {...props}
+    >
       {content}
     </Text>
   );

package/src/components/ChatList.tsx

@@ -22,7 +22,6 @@ import CustomPopup from './CustomAlert';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { ScaledSheet } from './ScaledSheet';
 import { formatDate } from '../utils/formatDate';
-import { viewabilityConfig } from '../viewabilityConfig';
 import { activeOpacity } from '../constants/activeOpacity';
 
 const headphonesIcon = require('../assets/headphones-01.png');
@@ -64,6 +63,9 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
   const [popupVisible, setPopupVisible] = useState(false);
   const [selectedMessage, setSelectedMessage] = useState<string>('');
   const [currentSection, setCurrentSection] = useState<string>('');
+  const lastSectionChangeTime = useRef<number>(0);
+  const pendingSectionRef = useRef<string | null>(null);
+  const MIN_SECTION_CHANGE_INTERVAL = 150;
 
   const sections = useMemo(() => {
     if (!data || data.length === 0) return [];
@@ -297,32 +299,41 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
     []
   );
 
-  const handleViewabilityChange = useCallback(
-    (info: { viewableItems: any[] }) => {
-      if (info.viewableItems && info.viewableItems.length > 0) {
-        // Find the first viewable item with a section
-        for (const viewableItem of info.viewableItems) {
-          if (viewableItem.section && viewableItem.section.title) {
-            const title = viewableItem.section.title;
-            if (title !== currentSection) {
-              setCurrentSection(title);
-              break;
+  const updateSectionSafely = useCallback(
+    (newSection: string) => {
+      const now = Date.now();
+      const timeSinceLastChange = now - lastSectionChangeTime.current;
+
+      // If this is a different section than current and pending
+      if (
+        newSection !== currentSection &&
+        newSection !== pendingSectionRef.current
+      ) {
+        // If we recently changed the section, queue this change
+        if (timeSinceLastChange < MIN_SECTION_CHANGE_INTERVAL) {
+          // Store the pending section
+          pendingSectionRef.current = newSection;
+
+          // Schedule an update after the minimum interval has passed
+          setTimeout(() => {
+            // Only update if pending section hasn't changed again
+            if (pendingSectionRef.current === newSection) {
+              setCurrentSection(newSection);
+              lastSectionChangeTime.current = Date.now();
+              pendingSectionRef.current = null;
             }
-          }
+          }, MIN_SECTION_CHANGE_INTERVAL - timeSinceLastChange);
+        } else {
+          // Enough time has passed, update immediately
+          setCurrentSection(newSection);
+          lastSectionChangeTime.current = now;
+          pendingSectionRef.current = null;
         }
       }
     },
     [currentSection]
   );
 
-  const viewabilityConfigCallbackPairs = useRef([
-    {
-      viewabilityConfig,
-      onViewableItemsChanged: handleViewabilityChange,
-    },
-  ]);
-
-  // We'll use onScroll instead of onMomentumScrollEnd for more responsive updates
   const handleScroll = useCallback(
     (event: any) => {
       const currentScrollY = event.nativeEvent.contentOffset.y;
@@ -331,60 +342,65 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
 
       setIsScrollingUp(currentScrollY > 300);
 
-      // Only proceed if we have sections and the list is scrolled enough
-      if (sections && sections.length > 0 && currentScrollY > 0) {
-        // Create visibility info for each section
-        let visibleSectionIndex = -1;
-        let maxVisibility = 0;
+      // Determine the section at the bottom of the window based on scroll position
+      if (sections && sections.length > 0) {
+        let accumulatedHeight = 0;
+        let lastVisibleSection = null;
 
-        // For inverted lists, we need to iterate through sections to find which one is most visible
+        // Check all sections
         for (let i = 0; i < sections.length; i++) {
           const section = sections[i];
           if (!section || !section.data) continue;
 
-          const sectionStartPercent = i / sections.length;
-          const sectionEndPercent = (i + 1) / sections.length;
-
-          // Convert percentages to scroll positions
-          const sectionStartPosition = contentHeight * sectionStartPercent;
-          const sectionEndPosition = contentHeight * sectionEndPercent;
-
-          // Calculate how much of this section is visible
-          const visibleTop = Math.max(currentScrollY, sectionStartPosition);
-          const visibleBottom = Math.min(
-            currentScrollY + scrollViewHeight,
-            sectionEndPosition
-          );
-          const visibleHeight = Math.max(0, visibleBottom - visibleTop);
-
-          // Track which section has the most visibility
-          if (visibleHeight > maxVisibility) {
-            maxVisibility = visibleHeight;
-            visibleSectionIndex = i;
+          // Calculate section height
+          const sectionHeight = section.data.length * (MESSAGE_MIN_HEIGHT + 10);
+
+          // Section positions
+          const sectionStart = accumulatedHeight;
+          const sectionEnd = sectionStart + sectionHeight;
+
+          // Visible area
+          const visibleTop = currentScrollY;
+          const visibleBottom = visibleTop + scrollViewHeight;
+
+          // Find the section visible at the bottom of the screen
+          const isSectionVisibleAtBottom =
+            (visibleBottom >= sectionStart && visibleBottom <= sectionEnd) ||
+            (sectionStart <= visibleTop && sectionEnd >= visibleBottom);
+
+          if (isSectionVisibleAtBottom) {
+            lastVisibleSection = section;
           }
+
+          accumulatedHeight += sectionHeight;
         }
 
-        // If we found a visible section, update the header
-        if (visibleSectionIndex >= 0 && visibleSectionIndex < sections.length) {
-          const visibleSection = sections[visibleSectionIndex];
-          if (
-            visibleSection?.title &&
-            visibleSection.title !== currentSection
-          ) {
-            console.log(
-              `Most visible section: ${visibleSection.title} (index ${visibleSectionIndex})`
-            );
-            setCurrentSection(visibleSection.title);
-          }
+        // Display the found section using our safe updater
+        if (
+          lastVisibleSection?.title &&
+          lastVisibleSection.title !== currentSection
+        ) {
+          updateSectionSafely(lastVisibleSection.title);
+        } else if (
+          !lastVisibleSection &&
+          currentScrollY <= 10 &&
+          sections[0]?.title
+        ) {
+          updateSectionSafely(sections[0].title);
         }
       }
 
-      // Check if we need to load more data
       if (currentScrollY >= contentHeight - scrollViewHeight - 200) {
         nextPage();
       }
     },
-    [nextPage, sections, currentSection]
+    [
+      nextPage,
+      sections,
+      currentSection,
+      MESSAGE_MIN_HEIGHT,
+      updateSectionSafely,
+    ]
   );
 
   const scrollToBottom = useCallback(
@@ -483,6 +499,13 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
     };
   }, []);
 
+  // Clear pending updates on unmount
+  useEffect(() => {
+    return () => {
+      pendingSectionRef.current = null;
+    };
+  }, []);
+
   if (nexPageFailed) {
     return (
       <View
@@ -570,7 +593,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
         <View style={styles.listContainer}>
           <AppText
             style={[
-              styles.fixedDateText,
+              styles.dateText,
               { color: themeColors.slate, backgroundColor: themeColors.ghost },
             ]}
           >
@@ -596,8 +619,8 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
             keyExtractor={(item: AppConversationMessage) =>
               item.id + '-' + item.created_at
             }
-            removeClippedSubviews={true}
-            maxToRenderPerBatch={10}
+            removeClippedSubviews={false}
+            maxToRenderPerBatch={20}
             windowSize={21}
             initialNumToRender={MESSAGES_PER_PAGE}
             getItemLayout={(_: any, index: number) => ({
@@ -606,10 +629,7 @@ export function ChatList({ onBack }: { onBack?: () => void }) {
               index,
             })}
             onScroll={handleScroll}
-            scrollEventThrottle={16}
-            viewabilityConfigCallbackPairs={
-              viewabilityConfigCallbackPairs.current
-            }
+            scrollEventThrottle={1}
             stickySectionHeadersEnabled={false}
           />
         </View>
@@ -762,12 +782,12 @@ const styles = ScaledSheet.create({
     alignSelf: 'center',
     marginVertical: '8@vs',
   },
-  fixedDateText: {
+  dateText: {
     fontSize: '14@vs',
     fontWeight: '500',
-    borderRadius: '8@s',
-    paddingHorizontal: '10@s',
-    paddingVertical: '4@s',
+    borderRadius: '12@s',
+    paddingHorizontal: '8@s',
+    paddingVertical: '2@s',
     position: 'absolute',
     top: '10@vs',
     zIndex: 10,

package/src/components/CustomerForm.tsx

@@ -106,7 +106,7 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
       <TouchableOpacity
         style={[styles.container, { backgroundColor: themeColors.background }]}
         onPress={Keyboard.dismiss}
-        activeOpacity={activeOpacity}
+        activeOpacity={1}
       >
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
@@ -284,21 +284,21 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
                 name="phone"
               />
             </View>
-            <TouchableOpacity
-              activeOpacity={activeOpacity}
-              style={[
-                styles.button,
-                { backgroundColor: themeColors.dark_background },
-              ]}
-              onPress={handleSubmit(onSubmit)}
-            >
-              <AppText
-                localization="customer.form.submit"
-                style={[styles.buttonText, { color: themeColors.light_text }]}
-              />
-            </TouchableOpacity>
           </View>
         </ScrollView>
+        <TouchableOpacity
+          activeOpacity={activeOpacity}
+          style={[
+            styles.button,
+            { backgroundColor: themeColors.dark_background },
+          ]}
+          onPress={handleSubmit(onSubmit)}
+        >
+          <AppText
+            localization="customer.form.submit"
+            style={[styles.buttonText, { color: themeColors.light_text }]}
+          />
+        </TouchableOpacity>
         <CustomPopup
           isVisible={popupVisible}
           onClose={() => setPopupVisible(false)}

package/src/components/MessageItem.tsx

@@ -176,6 +176,7 @@ const styles = ScaledSheet.create({
     maxWidth: '80%',
     minHeight: 60,
     minWidth: 100,
+    marginVertical: '5@vs',
   },
   leftMessage: {
     alignSelf: 'flex-start',

package/src/constants/translations.ts

@@ -10,8 +10,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Country',
     'customer.form.submit': 'Contact Now',
     'customer.form.error': 'Please fill in all required fields',
-    'customer.form.instructions':
-      'Complete the form below to receive personalized service',
+    'customer.form.instructions': 'How Can We Help You?',
     'customer.form.error.country': 'Country is required',
     'customer.form.error.email': 'Valid email is required',
     'customer.form.error.phone': 'Phone is required',
@@ -57,9 +56,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Ülke',
     'customer.form.submit': 'Şimdi İletişime Geç',
     'customer.form.error': 'Lütfen tüm zorunlu alanları doldurun',
-    'customer.form.instructions':
-      'Kişiselleştirilmiş hizmet almak için aşağıdaki formu doldurun',
-    'customer.form.error.country': 'Ülke alanı zorunludur',
+    'customer.form.instructions': 'Size Nasıl Yardımcı Olabiliriz?',
+    'customer.form.error.country': 'Ülke zorunludur',
     'customer.form.error.email': 'Geçerli bir e-posta adresi gerekli',
     'customer.form.error.phone': 'Telefon alanı zorunludur',
     'customer.form.placeholder.name': 'Adınızı girin',
@@ -104,9 +102,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'País',
     'customer.form.submit': 'Contactar Ahora',
     'customer.form.error': 'Por favor complete todos los campos requeridos',
-    'customer.form.instructions':
-      'Complete el formulario a continuación para recibir un servicio personalizado',
-    'customer.form.error.country': 'El país es requerido',
+    'customer.form.instructions': '¿Cómo Podemos Ayudarte?',
+    'customer.form.error.country': 'País es obligatorio',
     'customer.form.error.email': 'Se requiere un correo electrónico válido',
     'customer.form.error.phone': 'El teléfono es requerido',
     'customer.form.placeholder.name': 'Ingrese su nombre',
@@ -153,9 +150,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Pays',
     'customer.form.submit': 'Contacter Maintenant',
     'customer.form.error': 'Veuillez remplir tous les champs obligatoires',
-    'customer.form.instructions':
-      'Complétez le formulaire ci-dessous pour recevoir un service personnalisé',
-    'customer.form.error.country': 'Le pays est requis',
+    'customer.form.instructions': 'Comment Pouvons-Nous Vous Aider?',
+    'customer.form.error.country': 'Le pays est obligatoire',
     'customer.form.error.email': 'Un email valide est requis',
     'customer.form.error.phone': 'Le téléphone est requis',
     'customer.form.placeholder.name': 'Entrez votre nom',
@@ -203,8 +199,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Land',
     'customer.form.submit': 'Jetzt Kontaktieren',
     'customer.form.error': 'Bitte füllen Sie alle erforderlichen Felder aus',
-    'customer.form.instructions':
-      'Füllen Sie das folgende Formular aus, um einen personalisierten Service zu erhalten',
+    'customer.form.instructions': 'Wie Können Wir Ihnen Helfen?',
     'customer.form.error.country': 'Land ist erforderlich',
     'customer.form.error.email': 'Eine gültige E-Mail-Adresse ist erforderlich',
     'customer.form.error.phone': 'Telefon ist erforderlich',
@@ -254,8 +249,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Paese',
     'customer.form.submit': 'Contatta Ora',
     'customer.form.error': 'Si prega di compilare tutti i campi obbligatori',
-    'customer.form.instructions':
-      'Completa il modulo sottostante per ricevere un servizio personalizzato',
+    'customer.form.instructions': 'Come Possiamo Aiutarti?',
     'customer.form.error.country': 'Il paese è obbligatorio',
     'customer.form.error.email': "È richiesta un'email valida",
     'customer.form.error.phone': 'Il telefono è obbligatorio',
@@ -302,9 +296,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'País',
     'customer.form.submit': 'Contactar Agora',
     'customer.form.error': 'Por favor, preencha todos os campos obrigatórios',
-    'customer.form.instructions':
-      'Complete o formulário abaixo para receber um serviço personalizado',
-    'customer.form.error.country': 'O país é obrigatório',
+    'customer.form.instructions': 'Como Podemos Ajudar Você?',
+    'customer.form.error.country': 'País é obrigatório',
     'customer.form.error.email': 'Um email válido é obrigatório',
     'customer.form.error.phone': 'O telefone é obrigatório',
     'customer.form.placeholder.name': 'Digite seu nome',
@@ -327,7 +320,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.validation.name.maxLength':
       'O nome deve ter menos de 30 caracteres',
     'chat.empty.title': 'Você não tem mensagens.',
-    'chat.empty.description': 'As mensagens da equipe serão exibidas aqui.',
+    'chat.empty.description': 'As mensaggi da equipe serão exibidas aqui.',
     'chat.live': 'Chat ao Vivo',
     'chat.support-team': 'Equipe de Suporte',
     'customer.form.resend': 'Reenviar',
@@ -352,8 +345,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Страна',
     'customer.form.submit': 'Связаться Сейчас',
     'customer.form.error': 'Пожалуйста, заполните все обязательные поля',
-    'customer.form.instructions':
-      'Заполните форму ниже, чтобы получить персонализированное обслуживание',
+    'customer.form.instructions': 'Как Мы Можем Вам Помочь?',
     'customer.form.error.country': 'Страна обязательна',
     'customer.form.error.email': 'Требуется действительный email',
     'customer.form.error.phone': 'Телефон обязателен',
@@ -402,8 +394,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': '国',
     'customer.form.submit': '今すぐ連絡する',
     'customer.form.error': '必須項目をすべて入力してください',
-    'customer.form.instructions':
-      'パーソナライズされたサービスを受けるには、以下のフォームに記入してください',
+    'customer.form.instructions': 'どのようにお手伝いできますか？',
     'customer.form.error.country': '国は必須です',
     'customer.form.error.email': '有効なメールアドレスが必要です',
     'customer.form.error.phone': '電話番号は必須です',
@@ -449,7 +440,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': '国家',
     'customer.form.submit': '立即联系',
     'customer.form.error': '请填写所有必填字段',
-    'customer.form.instructions': '填写以下表格以获取个性化服务',
+    'customer.form.instructions': '我们能为您做什么？',
     'customer.form.error.country': '国家为必填项',
     'customer.form.error.email': '需要有效的电子邮件',
     'customer.form.error.phone': '电话为必填项',

package/src/hooks/useTheme.ts

@@ -0,0 +1,7 @@
+import { useAppStore } from '../store';
+import type { GlobalTheme } from '../types/GlobalTheme';
+
+export function useGlobalTheme(): Required<GlobalTheme> {
+  const themes = useAppStore((s) => s.themes);
+  return themes as Required<GlobalTheme>;
+}