@adminide-stack/yantra-mobile 12.0.28-alpha.61 → 12.0.28-alpha.63

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,useEffect,useCallback}from'react';import {useWindowDimensions,useColorScheme,Platform,Keyboard,TouchableWithoutFeedback,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 {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,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 const SENDING_LOADER_COMPOSER_RESERVE_PX = 156;
+const COMPOSER_SCROLL_RESERVE_PX = 164;
 function organizationFromSettingsValue(settings) {
   if (settings == null) return null;
   if (typeof settings === "string") {
@@ -49,6 +50,115 @@ function projectFromSettingsValue(settings) {
   }
   return null;
 }
+const ChatContentSection = React.memo(function ChatContentSection2({
+  contentMaxWidth,
+  composerScrollBottomPadding,
+  messages,
+  response,
+  isLoading,
+  disabled,
+  isStreaming,
+  onStop,
+  cancel,
+  onSend,
+  onBackPress
+}) {
+  return /* @__PURE__ */ jsx(Box, { flex: 1, width: "100%", alignSelf: "stretch", children: /* @__PURE__ */ jsx(MessagesContainerUI, { mode: "chat", showBackButton: false, onBackPress, compactTop: true, messagesContainerStyle: {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    paddingBottom: composerScrollBottomPadding,
+    margin: 0,
+    marginTop: 0,
+    alignSelf: "center",
+    width: contentMaxWidth
+  }, listContentStyle: {
+    paddingTop: 0,
+    paddingBottom: composerScrollBottomPadding,
+    margin: 0,
+    marginTop: 0,
+    width: contentMaxWidth,
+    alignSelf: "center",
+    justifyContent: "flex-end"
+  }, messages: messages.map((msg, index) => ({
+    id: `msg-${index}-${msg.role}`,
+    role: msg.role,
+    content: msg.content,
+    metadata: msg.metadata
+  })), streamingContent: response, currentUser: {
+    id: "user"
+  }, onSend, disabled: isLoading || disabled, isLoading, onStop: isStreaming ? cancel : onStop, renderPlanInputToolbar: () => null, renderBuildInputToolbar: () => null }) });
+});
+const EmptyStateSection = React.memo(function EmptyStateSection2({
+  isDark,
+  secondaryTextColor,
+  primaryTextColor,
+  activeMode,
+  onModeSwitch
+}) {
+  return /* @__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: () => onModeSwitch("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: () => onModeSwitch("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." })
+  ] }) });
+});
+const HeaderBackButton = React.memo(function HeaderBackButton2({
+  color,
+  onPress
+}) {
+  return /* @__PURE__ */ jsx(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.backButton, pressed && styles.newChatButtonPressed], accessibilityLabel: "Back to chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-left", size: 24, color }) });
+});
+const HeaderRightActions = React.memo(function HeaderRightActions2({
+  gatewayToolbarStatus,
+  gatewayToolbarError,
+  onToggleGateway,
+  gatewayToolbarLabel,
+  gatewayToolbarTone,
+  showChatHistory,
+  onOpenChatHistory,
+  onNewChat,
+  isDark,
+  accentColor,
+  newChatIconColor
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: styles.headerRight, children: [
+    /* @__PURE__ */ jsx(GatewayToolbarButtonMobile, { gatewayStatus: gatewayToolbarStatus, gatewayError: gatewayToolbarError, onToggleGateway, disabled: false, statusLabel: gatewayToolbarLabel, tone: gatewayToolbarTone }),
+    !showChatHistory ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenChatHistory, style: ({
+      pressed
+    }) => [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: onNewChat, style: ({
+      pressed
+    }) => [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 }) }) })
+  ] });
+});
 function HomeScreenContent({
   initialMode = "chat",
   onSubmit: onSubmitProp,
@@ -57,6 +167,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);
@@ -130,7 +245,6 @@ function HomeScreenContent({
     error: chatError,
     isLoading: chatLoading,
     isStreaming,
-    hasMessages,
     sendMessage,
     cancel,
     clearMessages
@@ -148,7 +262,36 @@ function HomeScreenContent({
   }, [chatLoading, isStreaming, messages]);
   const pinSendingLoaderNearComposer = useMemo(() => messages.length > 0 || Boolean((response != null ? response : "").trim()), [messages.length, response]);
   const showSendingLoader = !showChatHistory && (channelBootstrap || waitingForAssistant);
+  const hasRenderableConversation = messages.length > 0 || isStreaming;
   const insets = useSafeAreaInsets();
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  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 handleModeSwitch = useCallback((mode) => {
     setActiveMode(mode);
   }, []);
@@ -235,6 +378,12 @@ function HomeScreenContent({
   const gatewayToolbarTone = "default";
   const gatewayToolbarLabel = cdecli.status === "connecting" ? "Checking..." : void 0;
   const gatewayToolbarError = cdecli.error;
+  const surfaceColor = isDark ? "#0f172a" : mobileTokens.color.surface;
+  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 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()) || "";
@@ -248,7 +397,6 @@ function HomeScreenContent({
     const currentOrgName = ((_b2 = (_a2 = route == null ? void 0 : route.params) == null ? void 0 : _a2.orgName) == null ? void 0 : _b2.trim()) || "";
     if (hasRehydratedOrgRef.current || currentOrgName || !effectiveOrgName) return;
     hasRehydratedOrgRef.current = true;
-    console.log("effectiveOrgName..", effectiveOrgName);
     (_c2 = navigation.getParent()) == null ? void 0 : _c2.dispatch(CommonActions.navigate("MainStack", {
       screen: "MainStack.Layout.Home",
       params: {
@@ -257,25 +405,17 @@ function HomeScreenContent({
       merge: true,
       key: Date.now().toString()
     }));
-  }, [navigation, (_g = route == null ? void 0 : route.params) == null ? void 0 : _g.orgName, effectiveOrgName, navigationRef]);
+  }, [navigation, (_g = route == null ? void 0 : route.params) == null ? void 0 : _g.orgName, effectiveOrgName]);
   useEffect(() => {
+    const headerLeft = showChatHistory ? () => /* @__PURE__ */ jsx(HeaderBackButton, { color: primaryTextColor, onPress: handleCloseChatHistory }) : void 0;
+    const headerRight = () => /* @__PURE__ */ jsx(HeaderRightActions, { gatewayToolbarStatus, gatewayToolbarError, onToggleGateway: handleToggleGateway, gatewayToolbarLabel, gatewayToolbarTone, showChatHistory, onOpenChatHistory: handleOpenChatHistory, onNewChat: handleNewChat, isDark, accentColor, newChatIconColor });
     navigation.setOptions({
       drawerLabel: "Chat",
       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,
-      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,
-        /* @__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" }) })
-      ] })
+      headerLeft,
+      headerRight
     });
-  }, [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 = {
@@ -311,39 +451,6 @@ function HomeScreenContent({
       setChannelBootstrap(false);
     }
   }, [isLoading, disabled, activeMode, onSubmitProp, ensureSessionId, sendMessage]);
-  const leftItems = getDefaultLeftItems({
-    search: {
-      active: activeMode === "chat",
-      onClick: () => handleModeSwitch("chat")
-    },
-    zap: {
-      active: activeMode === "deep-search",
-      onClick: () => handleModeSwitch("deep-search")
-    },
-    lightbulb: {
-      enabled: false
-    }
-  });
-  const rightItems = getDefaultRightItems({
-    tag: {
-      enabled: false
-    },
-    chip: {
-      enabled: false
-    },
-    camera: {
-      enabled: false,
-      onClick: () => console.log("camera")
-    },
-    image: {
-      enabled: false,
-      onClick: () => console.log("image")
-    },
-    attach: {
-      enabled: false,
-      onClick: () => console.log("attach")
-    }
-  });
   const latestAssistantMessage = useMemo(() => {
     var _a2, _b2, _c2;
     for (let i = messages.length - 1; i >= 0; i -= 1) {
@@ -376,83 +483,111 @@ function HomeScreenContent({
       setChannelBootstrap(false);
     }
   }, [deepSearchQuery, isStreaming, ensureSessionId, sendMessage]);
+  const handleValueChange = useCallback((e) => {
+    setValue(e.nativeEvent.text);
+  }, []);
+  const handleMicPress = useCallback(() => {
+    console.log("mic");
+  }, []);
+  const handleSelectHistorySession = useCallback((channelId) => {
+    setShowChatHistory(false);
+    setActiveSessionId(channelId);
+    setActiveMode("chat");
+  }, []);
+  const handleComposeFromHistory = useCallback(() => {
+    setShowChatHistory(false);
+    setActiveSessionId(null);
+    setValue("");
+    clearMessages();
+  }, [clearMessages]);
+  const handleToggleResearchProcess = useCallback(() => {
+    setResearchProcessOpen((prev) => !prev);
+  }, []);
+  const handleToggleSourcesAccordion = useCallback(() => {
+    setSourcesAccordionOpen((prev) => !prev);
+  }, []);
+  const handleRetryDeepSearchPress = useCallback(() => {
+    void handleRetryDeepSearch();
+  }, [handleRetryDeepSearch]);
   useEffect(() => {
     if (!deepSearchQuery || isStreaming || !latestAssistantMessage) return;
     setDeepSearchSummary(normalizeSummaryText(latestAssistantMessage));
     setDeepSearchSources(extractDeepSearchSources(latestAssistantMessage));
   }, [deepSearchQuery, isStreaming, latestAssistantMessage]);
+  const composerScrollBottomPadding = COMPOSER_SCROLL_RESERVE_PX;
+  const leftItems = useMemo(() => getDefaultLeftItems({
+    search: {
+      active: activeMode === "chat",
+      onClick: () => handleModeSwitch("chat")
+    },
+    zap: {
+      active: activeMode === "deep-search",
+      onClick: () => handleModeSwitch("deep-search")
+    },
+    lightbulb: {
+      enabled: false
+    }
+  }), [activeMode, handleModeSwitch]);
+  const rightItems = useMemo(() => getDefaultRightItems({
+    tag: {
+      enabled: false
+    },
+    chip: {
+      enabled: false
+    },
+    camera: {
+      enabled: false,
+      onClick: () => console.log("camera")
+    },
+    image: {
+      enabled: false,
+      onClick: () => console.log("image")
+    },
+    attach: {
+      enabled: false,
+      onClick: () => console.log("attach")
+    }
+  }), []);
+  const inputConfig = useMemo(() => ({
+    value,
+    onChange: handleValueChange,
+    placeholder: inputPlaceholder,
+    disabled: isLoading || disabled
+  }), [value, handleValueChange, inputPlaceholder, isLoading, disabled]);
+  const micSendButton = useMemo(() => ({
+    hasContent: canSubmit,
+    onSend: () => handleSubmit(),
+    onMic: handleMicPress,
+    disabled: isLoading || disabled,
+    isLoading,
+    onStop: isStreaming ? cancel : onStop
+  }), [canSubmit, handleSubmit, handleMicPress, isLoading, disabled, isStreaming, cancel, onStop]);
   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 }) }),
-      showChatHistory ? /* @__PURE__ */ jsx(ChatHistoryLanding, { onSelectSession: (channelId) => {
-        setShowChatHistory(false);
-        setActiveSessionId(channelId);
-        setActiveMode("chat");
-      }, onCompose: () => {
-        setShowChatHistory(false);
-        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: {
-        paddingHorizontal: 0,
-        paddingTop: 6,
-        margin: 0
-      }, listContentStyle: {
-        paddingTop: 8,
-        margin: 0
-      }, messages: messages.map((msg, index) => ({
-        id: `msg-${index}-${msg.role}`,
-        role: msg.role,
-        content: msg.content,
-        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),
-        placeholder: inputPlaceholder,
-        disabled: inputDisabled
-      }, leftItems, rightItems, templateButton: null, templateModalConfig: null, micSendButton: {
-        hasContent: value2.trim().length > 0,
-        onSend: () => onSend(value2.trim()),
-        onMic: () => console.log("mic"),
-        disabled: inputDisabled,
-        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
-        } }) })
-      ] }),
+    /* @__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: handleSelectHistorySession, onCompose: handleComposeFromHistory }) : hasRenderableConversation ? /* @__PURE__ */ jsx(ChatContentSection, { contentMaxWidth, composerScrollBottomPadding, messages, response, isLoading, disabled, isStreaming, onStop, cancel, onSend: handleSendMessage, onBackPress: handleNewChat }) : /* @__PURE__ */ jsx(EmptyStateSection, { isDark, secondaryTextColor, primaryTextColor, activeMode, onModeSwitch: handleModeSwitch }),
+      !showChatHistory ? /* @__PURE__ */ jsx(View, { style: [styles.bottomComposerWrap, {
+        bottom: Math.max(0, keyboardHeight - insets.bottom),
+        paddingBottom: Math.max(insets.bottom - 6, 2)
+        // backgroundColor: composerBarBackground,
+        // borderTopColor: composerBarBorder,
+      }], children: /* @__PURE__ */ jsx(View, { style: [styles.bottomComposerInner, {
+        width: contentMaxWidth
+      }], children: /* @__PURE__ */ jsx(InputToolBar, { inputConfig, leftItems, rightItems, templateButton: null, templateModalConfig: null, micSendButton }) }) }) : 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 })
+    ] }) }),
+    /* @__PURE__ */ jsx(DeepSearchModal, { visible: isDeepSearchModalOpen, query: deepSearchQuery, summaryText: deepSearchPreviewNormalized, sources: deepSearchSources, isStreaming, researchProcessOpen, sourcesAccordionOpen, onToggleResearchProcess: handleToggleResearchProcess, onToggleSourcesAccordion: handleToggleSourcesAccordion, onRetry: handleRetryDeepSearchPress, onStop: cancel, onClose: handleDeepSearchClose })
   ] });
 }
 const styles = StyleSheet.create({
@@ -480,39 +615,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"
+    justifyContent: "center",
+    borderRadius: 22
+  },
+  newChatButtonInner: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "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 +692,97 @@ 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",
+    width: "100%",
+    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
+    },
+    backgroundColor: "transparent",
+    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