@kite-copilot/chat-panel 0.2.18 → 0.2.19

package/dist/auto.cjs

@@ -1266,6 +1266,7 @@ var initialMessages = [];
 function ChatPanel({
   isOpen = true,
   onClose,
+  onOpen,
   onBack,
   onNavigate,
   onActionComplete,
@@ -1367,6 +1368,9 @@ function ChatPanel({
   const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
   const pendingBulkSessionRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
+  const [searchExpanded, setSearchExpanded] = React4.useState(false);
+  const [searchInput, setSearchInput] = React4.useState("");
+  const searchInputRef = React4.useRef(null);
   React4.useEffect(() => {
     if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
       return;
@@ -2597,6 +2601,81 @@ ${userText}`
       ]);
     }
   }
+  if (!isOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex items-center gap-3 rounded-xl bg-white border border-gray-200 shadow-lg px-4 py-3 hover:shadow-xl transition-all duration-300 ease-out ${searchExpanded ? "w-[480px]" : "w-[320px]"}`, children: !searchExpanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "button",
+        {
+          onClick: () => {
+            setSearchExpanded(true);
+            setTimeout(() => searchInputRef.current?.focus(), 100);
+          },
+          className: "flex items-center gap-3 flex-1 group",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm text-gray-500 flex-1 text-left", children: "Ask a question..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u2318I" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          onClick: () => {
+            onOpen?.();
+          },
+          className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          value: searchInput,
+          onChange: (e) => setSearchInput(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && searchInput.trim()) {
+              e.preventDefault();
+              onOpen?.();
+              startChatFlow(searchInput.trim());
+              setSearchInput("");
+              setSearchExpanded(false);
+            } else if (e.key === "Escape") {
+              setSearchExpanded(false);
+              setSearchInput("");
+            }
+          },
+          onBlur: () => {
+            if (!searchInput.trim()) {
+              setTimeout(() => setSearchExpanded(false), 200);
+            }
+          },
+          placeholder: "Ask a question...",
+          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u21B5 Enter" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            onClick: () => {
+              onOpen?.();
+              if (searchInput.trim()) {
+                setInput(searchInput);
+              }
+              setSearchInput("");
+              setSearchExpanded(false);
+            },
+            className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors cursor-pointer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
+          }
+        )
+      ] })
+    ] }) }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "section",
     {
@@ -3909,26 +3988,6 @@ ${userText}`
     }
   );
 }
-function PanelToggle({
-  isOpen,
-  onClick,
-  className = ""
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: `fixed top-1/2 z-50 flex items-center justify-center w-6 h-16 bg-gray-100 hover:bg-gray-200 border border-gray-200 border-r-0 rounded-l-lg text-gray-600 hover:text-gray-800 shadow-md transition-all duration-300 ${className}`,
-      "aria-label": isOpen ? "Close help panel" : "Open help panel",
-      style: {
-        right: isOpen ? `${PANEL_WIDTH}px` : "0px",
-        transform: "translateY(-50%)"
-      },
-      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
-    }
-  );
-}
 function ChatPanelWithToggle({
   onNavigate,
   onActionComplete,
@@ -3958,22 +4017,20 @@ function ChatPanelWithToggle({
       document.body.style.transition = originalTransition;
     };
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelToggle, { isOpen, onClick: () => setIsOpen(!isOpen) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      ChatPanel,
-      {
-        isOpen,
-        onClose: () => setIsOpen(false),
-        onNavigate,
-        onActionComplete,
-        currentPage,
-        agentUrl,
-        startingQuestions,
-        startingQuestionsEndpoint
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ChatPanel,
+    {
+      isOpen,
+      onClose: () => setIsOpen(false),
+      onOpen: () => setIsOpen(true),
+      onNavigate,
+      onActionComplete,
+      currentPage,
+      agentUrl,
+      startingQuestions,
+      startingQuestionsEndpoint
+    }
+  );
 }
 
 // src/createKiteChat.tsx

package/dist/auto.d.cts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-BMLaQQQk.cjs';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.cjs';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.d.ts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-BMLaQQQk.js';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.js

@@ -1,6 +1,6 @@
 import {
   createKiteChat
-} from "./chunk-UW3AFJMK.js";
+} from "./chunk-5SGUG45C.js";
 
 // src/auto.ts
 function mountKiteChat(config) {

package/dist/{chunk-UW3AFJMK.js → chunk-5SGUG45C.js}

@@ -1265,6 +1265,7 @@ var initialMessages = [];
 function ChatPanel({
   isOpen = true,
   onClose,
+  onOpen,
   onBack,
   onNavigate,
   onActionComplete,
@@ -1366,6 +1367,9 @@ function ChatPanel({
   const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
   const pendingBulkSessionRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
+  const [searchExpanded, setSearchExpanded] = React4.useState(false);
+  const [searchInput, setSearchInput] = React4.useState("");
+  const searchInputRef = React4.useRef(null);
   React4.useEffect(() => {
     if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
       return;
@@ -2596,6 +2600,81 @@ ${userText}`
       ]);
     }
   }
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx9("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ jsx9("div", { className: `flex items-center gap-3 rounded-xl bg-white border border-gray-200 shadow-lg px-4 py-3 hover:shadow-xl transition-all duration-300 ease-out ${searchExpanded ? "w-[480px]" : "w-[320px]"}`, children: !searchExpanded ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 w-full", children: [
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          onClick: () => {
+            setSearchExpanded(true);
+            setTimeout(() => searchInputRef.current?.focus(), 100);
+          },
+          className: "flex items-center gap-3 flex-1 group",
+          children: [
+            /* @__PURE__ */ jsx9("span", { className: "text-sm text-gray-500 flex-1 text-left", children: "Ask a question..." }),
+            /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-400 font-medium", children: "\u2318I" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          onClick: () => {
+            onOpen?.();
+          },
+          className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors",
+          children: /* @__PURE__ */ jsx9(Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          value: searchInput,
+          onChange: (e) => setSearchInput(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && searchInput.trim()) {
+              e.preventDefault();
+              onOpen?.();
+              startChatFlow(searchInput.trim());
+              setSearchInput("");
+              setSearchExpanded(false);
+            } else if (e.key === "Escape") {
+              setSearchExpanded(false);
+              setSearchInput("");
+            }
+          },
+          onBlur: () => {
+            if (!searchInput.trim()) {
+              setTimeout(() => setSearchExpanded(false), 200);
+            }
+          },
+          placeholder: "Ask a question...",
+          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
+        }
+      ),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-400 font-medium", children: "\u21B5 Enter" }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            onClick: () => {
+              onOpen?.();
+              if (searchInput.trim()) {
+                setInput(searchInput);
+              }
+              setSearchInput("");
+              setSearchExpanded(false);
+            },
+            className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors cursor-pointer",
+            children: /* @__PURE__ */ jsx9(Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
+          }
+        )
+      ] })
+    ] }) }) });
+  }
   return /* @__PURE__ */ jsxs5(
     "section",
     {
@@ -3957,22 +4036,20 @@ function ChatPanelWithToggle({
       document.body.style.transition = originalTransition;
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(PanelToggle, { isOpen, onClick: () => setIsOpen(!isOpen) }),
-    /* @__PURE__ */ jsx9(
-      ChatPanel,
-      {
-        isOpen,
-        onClose: () => setIsOpen(false),
-        onNavigate,
-        onActionComplete,
-        currentPage,
-        agentUrl,
-        startingQuestions,
-        startingQuestionsEndpoint
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx9(
+    ChatPanel,
+    {
+      isOpen,
+      onClose: () => setIsOpen(false),
+      onOpen: () => setIsOpen(true),
+      onNavigate,
+      onActionComplete,
+      currentPage,
+      agentUrl,
+      startingQuestions,
+      startingQuestionsEndpoint
+    }
+  );
 }
 function HelpButton({ onClick, className = "" }) {
   return /* @__PURE__ */ jsx9(

package/dist/{createKiteChat-BMLaQQQk.d.cts → createKiteChat-CyoN-YV4.d.cts}

@@ -87,6 +87,8 @@ interface ChatPanelProps {
     isOpen?: boolean;
     /** Callback when the panel should close */
     onClose?: () => void;
+    /** Callback when the panel should open */
+    onOpen?: () => void;
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
@@ -97,7 +99,7 @@ interface ChatPanelProps {
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)

package/dist/{createKiteChat-BMLaQQQk.d.ts → createKiteChat-CyoN-YV4.d.ts}

@@ -87,6 +87,8 @@ interface ChatPanelProps {
     isOpen?: boolean;
     /** Callback when the panel should close */
     onClose?: () => void;
+    /** Callback when the panel should open */
+    onOpen?: () => void;
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
@@ -97,7 +99,7 @@ interface ChatPanelProps {
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)