@adminide-stack/yantra-mobile 12.0.28-alpha.59 → 12.0.28-alpha.62

package/lib/screens/Home/HomeScreen.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs}from'react/jsx-runtime';import React,{useState,useMemo,useCallback,useEffect}from'react';import {View,StyleSheet,Pressable}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getDefaultLeftItems,getDefaultRightItems,Box,Text,InputToolBar}from'@admin-layout/gluestack-ui-mobile';import {useSafeAreaInsets,SafeAreaView}from'react-native-safe-area-context';import {useNavigation,useRoute,CommonActions}from'@react-navigation/native';import {MessagesContainerUI}from'@messenger-box/platform-mobile';import {v4}from'uuid';import {ContributionSchemaId}from'common';import {useGetContextDataQuery,useGetPageSettingsQuery}from'common/graphql';import {useGatewayContext}from'../../contexts/GatewayContext.js';import {GatewayToolbarButtonMobile}from'../../components/GatewayToolbarButtonMobile.js';import {useCdecliAutoConnect}from'../../hooks/useCdecliAutoConnect.js';import {usePrerequisiteIds}from'../../hooks/usePrerequisiteIds.js';import {useChatMutations,useChatSessions}from'../../hooks/useChatApi.js';import {useChatStream}from'../../hooks/useChatStream.js';import DeepSearchModal from'./components/DeepSearchModal.js';import ChatHistoryLanding from'./components/ChatHistoryLanding.js';import {normalizeSummaryText,extractDeepSearchSources}from'./deepSearchUtils.js';import {YantraBrandLoader,YANTRA_LOADER_SIZE_COMPACT}from'../../components/YantraBrandLoader.js';import {navigationRef}from'@common-stack/client-react';var __defProp = Object.defineProperty;
+import {jsx,jsxs}from'react/jsx-runtime';import React,{useState,useMemo,useCallback,useEffect}from'react';import {useWindowDimensions,useColorScheme,View,StyleSheet,Pressable,Platform,Keyboard,TouchableWithoutFeedback}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {getDefaultLeftItems,getDefaultRightItems,Box,Text,InputToolBar}from'@admin-layout/gluestack-ui-mobile';import {useSafeAreaInsets,SafeAreaView}from'react-native-safe-area-context';import {useNavigation,useRoute,CommonActions}from'@react-navigation/native';import {MessagesContainerUI}from'@messenger-box/platform-mobile';import {v4}from'uuid';import {ContributionSchemaId}from'common';import {useGetContextDataQuery,useGetPageSettingsQuery}from'common/graphql';import {useGatewayContext}from'../../contexts/GatewayContext.js';import {GatewayToolbarButtonMobile}from'../../components/GatewayToolbarButtonMobile.js';import {useCdecliAutoConnect}from'../../hooks/useCdecliAutoConnect.js';import {usePrerequisiteIds}from'../../hooks/usePrerequisiteIds.js';import {useChatMutations,useChatSessions}from'../../hooks/useChatApi.js';import {useChatStream}from'../../hooks/useChatStream.js';import DeepSearchModal from'./components/DeepSearchModal.js';import ChatHistoryLanding from'./components/ChatHistoryLanding.js';import {normalizeSummaryText,extractDeepSearchSources}from'./deepSearchUtils.js';import {YantraBrandLoader,YANTRA_LOADER_SIZE_COMPACT}from'../../components/YantraBrandLoader.js';import {navigationRef}from'@common-stack/client-react';import {mobileTokens}from'../../theme/mobileTokens.js';var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,6 +15,8 @@ var __spreadValues = (a, b) => {
   return a;
 };
 const SENDING_LOADER_COMPOSER_RESERVE_PX = 156;
+const IOS_KEYBOARD_DOCKING_ADJUST_PX = 10;
+const COMPOSER_SCROLL_RESERVE_PX = 136;
 function organizationFromSettingsValue(settings) {
   if (settings == null) return null;
   if (typeof settings === "string") {
@@ -57,6 +59,11 @@ function HomeScreenContent({
   disabled = false
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
   const navigation = useNavigation();
   const route = useRoute();
   const hasRehydratedOrgRef = React.useRef(false);
@@ -149,6 +156,7 @@ function HomeScreenContent({
   const pinSendingLoaderNearComposer = useMemo(() => messages.length > 0 || Boolean((response != null ? response : "").trim()), [messages.length, response]);
   const showSendingLoader = !showChatHistory && (channelBootstrap || waitingForAssistant);
   const insets = useSafeAreaInsets();
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const handleModeSwitch = useCallback((mode) => {
     setActiveMode(mode);
   }, []);
@@ -235,6 +243,14 @@ function HomeScreenContent({
   const gatewayToolbarTone = "default";
   const gatewayToolbarLabel = cdecli.status === "connecting" ? "Checking..." : void 0;
   const gatewayToolbarError = cdecli.error;
+  const surfaceColor = isDark ? "#0f172a" : mobileTokens.color.bg;
+  const primaryTextColor = isDark ? "#e5e7eb" : mobileTokens.color.text;
+  const secondaryTextColor = isDark ? "#94a3b8" : mobileTokens.color.textMuted;
+  const accentColor = isDark ? "#a5b4fc" : "#4338ca";
+  const newChatIconColor = isDark ? "#e5e7eb" : "#000000";
+  const composerBarBackground = isDark ? "rgba(15, 23, 42, 0.94)" : "rgba(248, 250, 252, 0.97)";
+  const composerBarBorder = isDark ? "rgba(71, 85, 105, 0.5)" : "rgba(148, 163, 184, 0.25)";
+  const contentMaxWidth = Math.min(720, Math.max(360, screenWidth - 24));
   useEffect(() => {
     var _a2, _b2, _c2;
     const currentOrgName = ((_b2 = (_a2 = route == null ? void 0 : route.params) == null ? void 0 : _a2.orgName) == null ? void 0 : _b2.trim()) || "";
@@ -264,18 +280,18 @@ function HomeScreenContent({
       headerTitle: showChatHistory ? "Chats" : "Yantra",
       headerLeft: showChatHistory ? () => /* @__PURE__ */ jsx(Pressable, { onPress: handleCloseChatHistory, style: ({
         pressed
-      }) => [styles.backButton, pressed && styles.newChatButtonPressed], accessibilityLabel: "Back to chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-left", size: 24, color: "#111827" }) }) : void 0,
+      }) => [styles.backButton, pressed && styles.newChatButtonPressed], accessibilityLabel: "Back to chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-left", size: 24, color: primaryTextColor }) }) : void 0,
       headerRight: () => /* @__PURE__ */ jsxs(View, { style: styles.headerRight, children: [
         /* @__PURE__ */ jsx(GatewayToolbarButtonMobile, { gatewayStatus: gatewayToolbarStatus, gatewayError: gatewayToolbarError, onToggleGateway: handleToggleGateway, disabled: false, statusLabel: gatewayToolbarLabel, tone: gatewayToolbarTone }),
         !showChatHistory ? /* @__PURE__ */ jsx(Pressable, { onPress: handleOpenChatHistory, style: ({
           pressed
-        }) => [styles.historyHeaderButton, pressed && styles.historyHeaderButtonPressed], accessibilityLabel: "Chat history", accessibilityRole: "button", children: /* @__PURE__ */ jsx(View, { style: styles.historyHeaderButtonInner, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "history", size: 19, color: "#4338ca" }) }) }) : null,
+        }) => [styles.historyHeaderButton, pressed && styles.historyHeaderButtonPressed], accessibilityLabel: "Chat history", accessibilityRole: "button", children: /* @__PURE__ */ jsx(View, { style: [styles.historyHeaderButtonInner, isDark ? styles.historyHeaderButtonInnerDark : null], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "history", size: 19, color: accentColor }) }) }) : null,
         /* @__PURE__ */ jsx(Pressable, { onPress: handleNewChat, style: ({
           pressed
-        }) => [styles.newChatButton, pressed && styles.newChatButtonPressed], accessibilityLabel: "New chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chat-plus-outline", size: 26, color: "#000" }) })
+        }) => [styles.newChatButton, pressed && styles.newChatButtonPressed], accessibilityLabel: "New chat", children: /* @__PURE__ */ jsx(View, { style: [styles.newChatButtonInner, isDark ? styles.newChatButtonInnerDark : null], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chat-plus-outline", size: 20, color: newChatIconColor }) }) })
       ] })
     });
-  }, [navigation, showChatHistory, handleCloseChatHistory, handleOpenChatHistory, handleNewChat, handleToggleGateway, gatewayToolbarStatus, gatewayToolbarError, gatewayToolbarLabel, gatewayToolbarTone]);
+  }, [navigation, showChatHistory, handleCloseChatHistory, handleOpenChatHistory, handleNewChat, handleToggleGateway, gatewayToolbarStatus, gatewayToolbarError, gatewayToolbarLabel, gatewayToolbarTone, primaryTextColor, accentColor, newChatIconColor, isDark]);
   const handleSendMessage = useCallback(async (text) => {
     if (!text.trim() || isLoading || disabled) return;
     const submission = {
@@ -381,12 +397,47 @@ function HomeScreenContent({
     setDeepSearchSummary(normalizeSummaryText(latestAssistantMessage));
     setDeepSearchSources(extractDeepSearchSources(latestAssistantMessage));
   }, [deepSearchQuery, isStreaming, latestAssistantMessage]);
+  useEffect(() => {
+    if (Platform.OS === "ios") {
+      const frameSub = Keyboard.addListener("keyboardWillChangeFrame", (event) => {
+        var _a2, _b2;
+        return setKeyboardHeight((_b2 = (_a2 = event.endCoordinates) == null ? void 0 : _a2.height) != null ? _b2 : 0);
+      });
+      const showSub2 = Keyboard.addListener("keyboardWillShow", (event) => {
+        var _a2, _b2;
+        return setKeyboardHeight((_b2 = (_a2 = event.endCoordinates) == null ? void 0 : _a2.height) != null ? _b2 : 0);
+      });
+      const hideSub2 = Keyboard.addListener("keyboardWillHide", () => setKeyboardHeight(0));
+      return () => {
+        frameSub.remove();
+        showSub2.remove();
+        hideSub2.remove();
+      };
+    }
+    const showSub = Keyboard.addListener("keyboardDidShow", (event) => {
+      var _a2, _b2;
+      return setKeyboardHeight((_b2 = (_a2 = event.endCoordinates) == null ? void 0 : _a2.height) != null ? _b2 : 0);
+    });
+    const hideSub = Keyboard.addListener("keyboardDidHide", () => setKeyboardHeight(0));
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  const composerBottomOffset = Math.max(0, keyboardHeight - insets.bottom - (Platform.OS === "ios" ? IOS_KEYBOARD_DOCKING_ADJUST_PX : 0));
+  const composerScrollBottomPadding = COMPOSER_SCROLL_RESERVE_PX;
   return /* @__PURE__ */ jsxs(SafeAreaView, { edges: ["left", "right", "bottom"], style: {
     flex: 1,
-    backgroundColor: "#fff"
+    backgroundColor: surfaceColor
   }, children: [
-    /* @__PURE__ */ jsxs(Box, { flex: 1, width: "100%", position: "relative", children: [
-      (chatError || cdecli.error) && /* @__PURE__ */ jsx(Box, { mb: "$2", mx: "$4", p: "$3", bg: "$gray200", borderRadius: "$md", children: /* @__PURE__ */ jsx(Text, { fontSize: "$sm", color: "$gray900", children: chatError || cdecli.error }) }),
+    /* @__PURE__ */ jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, accessible: false, children: /* @__PURE__ */ jsxs(Box, { flex: 1, width: "100%", position: "relative", children: [
+      (chatError || cdecli.error) && /* @__PURE__ */ jsx(Box, { mb: "$2", mx: "$4", p: "$3", borderRadius: "$md", style: {
+        backgroundColor: isDark ? "#2b1a1d" : "#fef2f2",
+        borderWidth: 1,
+        borderColor: isDark ? "#7f1d1d" : "#fecaca"
+      }, children: /* @__PURE__ */ jsx(Text, { fontSize: "$sm", style: {
+        color: isDark ? "#fecaca" : "#991b1b"
+      }, children: chatError || cdecli.error }) }),
       showChatHistory ? /* @__PURE__ */ jsx(ChatHistoryLanding, { onSelectSession: (channelId) => {
         setShowChatHistory(false);
         setActiveSessionId(channelId);
@@ -396,13 +447,21 @@ function HomeScreenContent({
         setActiveSessionId(null);
         setValue("");
         clearMessages();
-      } }) : hasMessages || response ? /* @__PURE__ */ jsx(Box, { flex: 1, width: "100%", alignSelf: "stretch", children: /* @__PURE__ */ jsx(MessagesContainerUI, { mode: "chat", showBackButton: false, onBackPress: handleNewChat, compactTop: false, messagesContainerStyle: {
+      } }) : hasMessages || response ? /* @__PURE__ */ jsx(Box, { flex: 1, width: "100%", alignSelf: "stretch", children: /* @__PURE__ */ jsx(MessagesContainerUI, { mode: "chat", showBackButton: false, onBackPress: handleNewChat, compactTop: true, messagesContainerStyle: {
         paddingHorizontal: 0,
-        paddingTop: 6,
-        margin: 0
+        paddingTop: 0,
+        paddingBottom: composerScrollBottomPadding,
+        margin: 0,
+        marginTop: 0,
+        alignSelf: "center",
+        width: contentMaxWidth
       }, listContentStyle: {
-        paddingTop: 8,
-        margin: 0
+        paddingTop: 0,
+        paddingBottom: composerScrollBottomPadding,
+        margin: 0,
+        marginTop: 0,
+        width: contentMaxWidth,
+        alignSelf: "center"
       }, messages: messages.map((msg, index) => ({
         id: `msg-${index}-${msg.role}`,
         role: msg.role,
@@ -410,46 +469,61 @@ function HomeScreenContent({
         metadata: msg.metadata
       })), streamingContent: response, currentUser: {
         id: "user"
-      }, onSend: handleSendMessage, disabled: isLoading || disabled, isLoading, onStop: isStreaming ? cancel : onStop, renderPlanInputToolbar: ({
-        value: value2,
-        onChange,
-        onSend,
-        disabled: inputDisabled
-      }) => /* @__PURE__ */ jsx(InputToolBar, { inputConfig: {
-        value: value2,
-        onChange: (e) => onChange(e.nativeEvent.text),
+      }, onSend: handleSendMessage, disabled: isLoading || disabled, isLoading, onStop: isStreaming ? cancel : onStop, renderPlanInputToolbar: () => null, renderBuildInputToolbar: () => null }) }) : /* @__PURE__ */ jsx(Box, { flex: 1, width: "100%", children: /* @__PURE__ */ jsxs(View, { style: styles.emptyCenterTitleWrap, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.emptyEyebrow, {
+          color: secondaryTextColor
+        }], children: "Choose your mode" }),
+        /* @__PURE__ */ jsxs(View, { style: [styles.emptyModePillRow, {
+          backgroundColor: isDark ? "rgba(30, 41, 59, 0.9)" : "#eef2ff",
+          borderColor: isDark ? "rgba(148, 163, 184, 0.26)" : "rgba(67, 56, 202, 0.15)"
+        }], children: [
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => handleModeSwitch("chat"), style: [styles.emptyModePill, activeMode === "chat" && styles.emptyModePillActive, activeMode === "chat" && {
+            backgroundColor: isDark ? "#312e81" : "#4338ca"
+          }], accessibilityRole: "button", accessibilityLabel: "Switch to chat mode", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 14, color: activeMode === "chat" ? "#ffffff" : secondaryTextColor }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.emptyModePillLabel, {
+              color: activeMode === "chat" ? "#ffffff" : secondaryTextColor
+            }], children: "Chat" })
+          ] }),
+          /* @__PURE__ */ jsxs(Pressable, { onPress: () => handleModeSwitch("deep-search"), style: [styles.emptyModePill, activeMode === "deep-search" && styles.emptyModePillActive, activeMode === "deep-search" && {
+            backgroundColor: isDark ? "#312e81" : "#4338ca"
+          }], accessibilityRole: "button", accessibilityLabel: "Switch to deep-search mode", children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "lightning-bolt-outline", size: 14, color: activeMode === "deep-search" ? "#ffffff" : secondaryTextColor }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.emptyModePillLabel, {
+              color: activeMode === "deep-search" ? "#ffffff" : secondaryTextColor
+            }], children: "Deep Search" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.emptyCenterTitle, {
+          color: primaryTextColor
+        }], children: "How do you want to start?" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.emptySubtitle, {
+          color: secondaryTextColor
+        }], children: "Use Chat for quick help, or Deep Search for researched, source-backed answers." })
+      ] }) }),
+      !showChatHistory ? /* @__PURE__ */ jsx(View, { style: [styles.bottomComposerWrap, {
+        paddingBottom: Math.max(insets.bottom - 6, 2) + composerBottomOffset,
+        backgroundColor: composerBarBackground,
+        borderTopColor: composerBarBorder
+      }], children: /* @__PURE__ */ jsx(View, { style: [styles.bottomComposerInner, {
+        width: contentMaxWidth
+      }], children: /* @__PURE__ */ jsx(InputToolBar, { inputConfig: {
+        value,
+        onChange: (e) => setValue(e.nativeEvent.text),
         placeholder: inputPlaceholder,
-        disabled: inputDisabled
+        disabled: isLoading || disabled
       }, leftItems, rightItems, templateButton: null, templateModalConfig: null, micSendButton: {
-        hasContent: value2.trim().length > 0,
-        onSend: () => onSend(value2.trim()),
+        hasContent: canSubmit,
+        onSend: () => handleSubmit(),
         onMic: () => console.log("mic"),
-        disabled: inputDisabled,
+        disabled: isLoading || disabled,
         isLoading,
         onStop: isStreaming ? cancel : onStop
-      } }), renderBuildInputToolbar: () => null }) }) : /* @__PURE__ */ jsxs(Box, { flex: 1, width: "100%", children: [
-        /* @__PURE__ */ jsx(View, { style: styles.emptyCenterTitleWrap, children: /* @__PURE__ */ jsx(Text, { style: styles.emptyCenterTitle, children: "What can I do for you?" }) }),
-        /* @__PURE__ */ jsx(View, { style: [styles.bottomComposerWrap, {
-          paddingBottom: Math.max(insets.bottom - 6, 2),
-          marginBottom: -Math.max(insets.bottom - 2, 0)
-        }], children: /* @__PURE__ */ jsx(InputToolBar, { inputConfig: {
-          value,
-          onChange: (e) => setValue(e.nativeEvent.text),
-          placeholder: inputPlaceholder,
-          disabled: isLoading || disabled
-        }, leftItems, rightItems, templateButton: null, templateModalConfig: null, micSendButton: {
-          hasContent: canSubmit,
-          onSend: () => handleSubmit(),
-          onMic: () => console.log("mic"),
-          disabled: isLoading || disabled,
-          isLoading,
-          onStop
-        } }) })
-      ] }),
+      } }) }) }) : null,
       showSendingLoader ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: pinSendingLoaderNearComposer ? [styles.sendingLoaderAboveComposer, {
         bottom: Math.max(insets.bottom, 12) + SENDING_LOADER_COMPOSER_RESERVE_PX
       }] : styles.sendingLoaderEmptyState, children: /* @__PURE__ */ jsx(YantraBrandLoader, { size: YANTRA_LOADER_SIZE_COMPACT }) }) : null
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsx(DeepSearchModal, { visible: isDeepSearchModalOpen, query: deepSearchQuery, summaryText: deepSearchPreviewNormalized, sources: deepSearchSources, isStreaming, researchProcessOpen, sourcesAccordionOpen, onToggleResearchProcess: () => setResearchProcessOpen((prev) => !prev), onToggleSourcesAccordion: () => setSourcesAccordionOpen((prev) => !prev), onRetry: () => {
       void handleRetryDeepSearch();
     }, onStop: cancel, onClose: handleDeepSearchClose })
@@ -480,39 +554,67 @@ const styles = StyleSheet.create({
   headerRight: {
     flexDirection: "row",
     alignItems: "center",
-    marginRight: 4,
-    gap: 2
+    marginRight: 6,
+    gap: 6
   },
   historyHeaderButton: {
-    marginHorizontal: 2,
-    padding: 4,
+    marginHorizontal: 0,
+    padding: 0,
     borderRadius: 22
   },
   historyHeaderButtonPressed: {
     opacity: 0.72
   },
   historyHeaderButtonInner: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#eef2ff",
+    backgroundColor: mobileTokens.color.primarySoft,
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: "rgba(67, 56, 202, 0.22)",
-    shadowColor: "#4338ca",
-    shadowOpacity: 0.12,
-    shadowRadius: 6,
+    borderColor: mobileTokens.color.primaryBorder,
+    shadowColor: "#312e81",
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
     shadowOffset: {
       width: 0,
       height: 2
     },
     elevation: 2
   },
+  historyHeaderButtonInnerDark: {
+    backgroundColor: "#1e293b",
+    borderColor: "rgba(148, 163, 184, 0.35)",
+    shadowColor: "#111827"
+  },
   newChatButton: {
-    padding: 6,
+    padding: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 22
+  },
+  newChatButtonInner: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    backgroundColor: mobileTokens.color.surface,
+    borderWidth: 1,
+    borderColor: mobileTokens.color.border,
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.08,
+    shadowRadius: 5,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 2
+  },
+  newChatButtonInnerDark: {
+    backgroundColor: "#0f172a",
+    borderColor: "#334155"
   },
   backButton: {
     marginLeft: 6,
@@ -529,19 +631,95 @@ const styles = StyleSheet.create({
   emptyCenterTitleWrap: {
     flex: 1,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "flex-start",
     paddingHorizontal: 24,
-    paddingTop: 44
+    paddingTop: 88,
+    paddingBottom: 52,
+    maxWidth: 520,
+    alignSelf: "center"
+  },
+  emptyEyebrow: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.4,
+    textTransform: "uppercase",
+    marginBottom: 10
   },
   emptyCenterTitle: {
-    fontSize: 52 / 2,
-    fontWeight: "400",
-    color: "#111827",
+    marginTop: 2,
+    fontSize: 30,
+    fontWeight: "700",
     textAlign: "center",
-    letterSpacing: 0.2
+    letterSpacing: -0.5
+  },
+  emptySubtitle: {
+    marginTop: 12,
+    fontSize: 14,
+    lineHeight: 22,
+    textAlign: "center",
+    paddingHorizontal: 16,
+    maxWidth: 360
   },
   bottomComposerWrap: {
-    paddingHorizontal: 14
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "flex-end",
+    borderTopWidth: 1,
+    shadowColor: "#0f172a",
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    elevation: 6
+  },
+  bottomComposerInner: {
+    paddingHorizontal: 14,
+    paddingTop: 10,
+    paddingBottom: 4
+  },
+  emptyModePillRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 22,
+    borderRadius: 16,
+    padding: 6,
+    borderWidth: 1,
+    shadowColor: "#312e81",
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    elevation: 3
+  },
+  emptyModePill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 7,
+    borderRadius: 11
+  },
+  emptyModePillActive: {
+    shadowColor: "#312e81",
+    shadowOpacity: 0.18,
+    shadowRadius: 6,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 2
+  },
+  emptyModePillLabel: {
+    fontSize: 12,
+    fontWeight: "600"
   }
 });
 const HomeScreen = (props) => /* @__PURE__ */ jsx(HomeScreenContent, __spreadValues({}, props));export{HomeScreen as default};//# sourceMappingURL=HomeScreen.js.map