@hef2024/llmasaservice-ui 0.16.9 → 0.17.0

package/dist/index.d.mts

@@ -170,6 +170,12 @@ interface AgentConfig {
     localName?: string;
     avatarUrl?: string;
 }
+/**
+ * Imperative handle for programmatic control of AIAgentPanel
+ */
+interface AIAgentPanelHandle {
+    startNewConversation: (prompt: string, agent?: string) => void;
+}
 /**
  * Props for AIAgentPanel
  */
@@ -218,12 +224,15 @@ interface AIAgentPanelProps {
         clickCode?: string;
         style?: string;
     }[];
+    initialPrompt?: string;
+    initialMessage?: string;
+    hideInitialPrompt?: boolean;
     followOnQuestions?: string[];
     followOnPrompt?: string;
     historyListLimit?: number;
     showConversationHistory?: boolean;
 }
-declare const AIAgentPanel: React__default.FC<AIAgentPanelProps>;
+declare const AIAgentPanel: React__default.ForwardRefExoticComponent<AIAgentPanelProps & React__default.RefAttributes<AIAgentPanelHandle>>;
 
 /**
  * AIChatPanel - A modern chat interface using shadcn-style components

package/dist/index.d.ts

@@ -170,6 +170,12 @@ interface AgentConfig {
     localName?: string;
     avatarUrl?: string;
 }
+/**
+ * Imperative handle for programmatic control of AIAgentPanel
+ */
+interface AIAgentPanelHandle {
+    startNewConversation: (prompt: string, agent?: string) => void;
+}
 /**
  * Props for AIAgentPanel
  */
@@ -218,12 +224,15 @@ interface AIAgentPanelProps {
         clickCode?: string;
         style?: string;
     }[];
+    initialPrompt?: string;
+    initialMessage?: string;
+    hideInitialPrompt?: boolean;
     followOnQuestions?: string[];
     followOnPrompt?: string;
     historyListLimit?: number;
     showConversationHistory?: boolean;
 }
-declare const AIAgentPanel: React__default.FC<AIAgentPanelProps>;
+declare const AIAgentPanel: React__default.ForwardRefExoticComponent<AIAgentPanelProps & React__default.RefAttributes<AIAgentPanelHandle>>;
 
 /**
  * AIChatPanel - A modern chat interface using shadcn-style components

package/dist/index.js

@@ -3669,6 +3669,7 @@ var AIChatPanel = ({
   const prevIdleRef = (0, import_react11.useRef)(true);
   const hasNotifiedCompletionRef = (0, import_react11.useRef)(true);
   const latestHistoryRef = (0, import_react11.useRef)(initialHistory);
+  const initialPromptSentRef = (0, import_react11.useRef)(false);
   (0, import_react11.useEffect)(() => {
     if (!initialHistory) return;
     setHistory((prev) => {
@@ -3913,11 +3914,22 @@ var AIChatPanel = ({
     const promptToSend = promptText;
     if (!promptToSend || !promptToSend.trim()) return;
     setIsLoading(true);
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    const promptKey = `${timestamp}:${promptToSend.trim()}`;
+    setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
+      [promptKey]: { content: "", callId: "" }
+    }));
+    setLastPrompt(promptToSend.trim());
+    setLastKey(promptKey);
+    setTimeout(() => {
+      scrollToBottom();
+    }, 0);
     console.log("AIChatPanel.continueChat - about to call ensureConversation");
     ensureConversation().then((convId) => {
       console.log("AIChatPanel.continueChat - ensureConversation resolved with:", convId);
       const messagesAndHistory = [];
       Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+        if (historyPrompt === promptKey) return;
         let promptForHistory = historyPrompt;
         const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
         if (isoTimestampRegex.test(historyPrompt)) {
@@ -3930,13 +3942,8 @@ var AIChatPanel = ({
         messagesAndHistory.push({ role: "user", content: promptForHistory });
         messagesAndHistory.push({ role: "assistant", content: historyEntry.content });
       });
-      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-      const promptKey = `${timestamp}:${promptToSend.trim()}`;
-      setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
-        [promptKey]: { content: "", callId: "" }
-      }));
       let fullPromptToSend = promptToSend.trim();
-      if (Object.keys(history).length === 0 && promptTemplate) {
+      if (messagesAndHistory.length === 0 && promptTemplate) {
         fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
       }
       if (followOnPrompt) {
@@ -3963,17 +3970,12 @@ ${followOnPrompt}`;
         // Use the conversation ID from ensureConversation
         newController
       );
-      setLastPrompt(promptToSend.trim());
       setLastMessages(messagesAndHistory);
-      setLastKey(promptKey);
       if (convId && onConversationCreated) {
         setTimeout(() => {
           onConversationCreated(convId);
         }, 100);
       }
-      setTimeout(() => {
-        scrollToBottom();
-      }, 0);
     });
   }, [
     idle,
@@ -4128,50 +4130,11 @@ ${followOnPrompt}`;
     };
   }, []);
   (0, import_react11.useEffect)(() => {
-    const hasLoadedHistory = initialHistory && Object.keys(initialHistory).length > 0;
-    if (!project_id) {
-      return;
+    if (initialPrompt && initialPrompt !== "" && !initialPromptSentRef.current) {
+      initialPromptSentRef.current = true;
+      continueChat(initialPrompt);
     }
-    if (initialPrompt && initialPrompt !== "" && initialPrompt !== lastPrompt && !hasLoadedHistory) {
-      setIsLoading(true);
-      setThinkingBlocks([]);
-      setCurrentThinkingIndex(0);
-      setUserHasScrolled(false);
-      ensureConversation().then((convId) => {
-        const controller = new AbortController();
-        setLastController(controller);
-        const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-        const promptKey = `${timestamp}:${initialPrompt}`;
-        setHistory({ [promptKey]: { content: "", callId: "" } });
-        let fullPrompt = initialPrompt;
-        if (promptTemplate) {
-          fullPrompt = promptTemplate.replace("{{prompt}}", initialPrompt);
-        }
-        send(
-          fullPrompt,
-          [],
-          [
-            ...dataWithExtras(),
-            { key: "--messages", data: "0" }
-          ],
-          true,
-          true,
-          service,
-          convId,
-          // Use conversation ID from ensureConversation
-          controller
-        );
-        setLastPrompt(initialPrompt);
-        setLastMessages([]);
-        setLastKey(promptKey);
-        if (convId && onConversationCreated) {
-          setTimeout(() => {
-            onConversationCreated(convId);
-          }, 100);
-        }
-      });
-    }
-  }, [initialPrompt, initialHistory, ensureConversation, promptTemplate, send, dataWithExtras, service, lastPrompt, project_id, onConversationCreated]);
+  }, [initialPrompt, continueChat]);
   const CodeBlock = (0, import_react11.useCallback)((_a) => {
     var _b = _a, { node, inline, className, children } = _b, props = __objRest(_b, ["node", "inline", "className", "children"]);
     const match = /language-(\w+)/.exec(className || "");
@@ -4226,7 +4189,13 @@ ${followOnPrompt}`;
         variant: "default",
         size: "sm",
         className: "ai-chat-agent-suggestion__button",
-        onClick: () => onAgentChange(agentId)
+        onClick: () => {
+          onAgentChange(agentId);
+          setTimeout(() => {
+            var _a;
+            (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "auto" });
+          }, 50);
+        }
       },
       "Switch"
     ));
@@ -4682,6 +4651,9 @@ var ChatPanelWrapper = ({
   effectiveCustomer,
   showPoweredBy,
   actions,
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions,
   followOnPrompt,
   agentOptions,
@@ -4692,7 +4664,8 @@ var ChatPanelWrapper = ({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
-  onConversationCreated
+  onConversationCreated,
+  conversationInitialPrompt
 }) => {
   var _a, _b;
   const convAgentProfile = getAgent(activeConv.agentId);
@@ -4728,6 +4701,7 @@ var ChatPanelWrapper = ({
   const mcpServers = (0, import_react13.useMemo)(() => {
     return (convAgentProfile == null ? void 0 : convAgentProfile.mcpServers) || EMPTY_ARRAY;
   }, [convAgentProfile == null ? void 0 : convAgentProfile.mcpServers]);
+  const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
   if (!convAgentMetadata) return null;
   return /* @__PURE__ */ import_react13.default.createElement(
     "div",
@@ -4744,10 +4718,10 @@ var ChatPanelWrapper = ({
         title: "",
         theme,
         promptTemplate: convAgentMetadata.displayPromptTemplate || "{{prompt}}",
-        initialMessage: convAgentMetadata.displayStartMessageOrPrompt === "message" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0,
-        initialPrompt: convAgentMetadata.displayStartMessageOrPrompt === "prompt" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0,
+        initialMessage: initialMessage || (convAgentMetadata.displayStartMessageOrPrompt === "message" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0),
+        initialPrompt: effectiveInitialPrompt || (convAgentMetadata.displayStartMessageOrPrompt === "prompt" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0),
         placeholder: convAgentMetadata.displayPlaceholder || "Type a message...",
-        hideInitialPrompt: (_a = convAgentMetadata.displayHideInitialPrompt) != null ? _a : true,
+        hideInitialPrompt: (_a = hideInitialPrompt != null ? hideInitialPrompt : convAgentMetadata.displayHideInitialPrompt) != null ? _a : true,
         data: chatPanelData,
         agent: activeConv.agentId,
         conversation: activeConv.conversationId.startsWith("new-") ? void 0 : activeConv.conversationId,
@@ -4781,7 +4755,7 @@ var ChatPanelWrapper = ({
   );
 };
 ChatPanelWrapper.displayName = "ChatPanelWrapper";
-var AIAgentPanel = ({
+var AIAgentPanel = import_react13.default.forwardRef(({
   agents,
   defaultAgent,
   customerId,
@@ -4813,11 +4787,14 @@ var AIAgentPanel = ({
   showPoweredBy = true,
   conversation,
   actions = [],
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions = [],
   followOnPrompt = "",
   historyListLimit = 50,
   showConversationHistory = true
-}) => {
+}, ref) => {
   var _a, _b, _c, _d;
   const [isCollapsed, setIsCollapsed] = (0, import_react13.useState)(defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = (0, import_react13.useState)(() => {
@@ -4899,6 +4876,29 @@ var AIAgentPanel = ({
   activeConversationsRef.current = activeConversations;
   const currentConversationIdRef = (0, import_react13.useRef)(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
+  import_react13.default.useImperativeHandle(ref, () => ({
+    startNewConversation: (prompt, agent) => {
+      const targetAgent = agent || currentAgentId;
+      const tempId = `new-${Date.now()}`;
+      setActiveConversations((prev) => {
+        const next = new Map(prev);
+        next.set(tempId, {
+          conversationId: tempId,
+          stableKey: tempId,
+          agentId: targetAgent,
+          history: {},
+          isLoading: false,
+          title: "New conversation",
+          conversationInitialPrompt: prompt
+        });
+        return next;
+      });
+      setCurrentConversationId(tempId);
+      if (onConversationChange) {
+        onConversationChange(tempId);
+      }
+    }
+  }), [currentAgentId, onConversationChange]);
   const [showContextNotification, setShowContextNotification] = (0, import_react13.useState)(false);
   const prevContextRef = (0, import_react13.useRef)(null);
   const contextNotificationTimeoutRef = (0, import_react13.useRef)(null);
@@ -5242,15 +5242,17 @@ var AIAgentPanel = ({
     let filtered = apiConversations;
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(
-        (conv) => {
-          var _a2, _b2;
-          return ((_a2 = conv.title) == null ? void 0 : _a2.toLowerCase().includes(query)) || ((_b2 = conv.summary) == null ? void 0 : _b2.toLowerCase().includes(query));
-        }
-      );
+      filtered = filtered.filter((conv) => {
+        var _a2, _b2;
+        if ((_a2 = conv.title) == null ? void 0 : _a2.toLowerCase().includes(query)) return true;
+        if ((_b2 = conv.summary) == null ? void 0 : _b2.toLowerCase().includes(query)) return true;
+        const firstPrompt = conversationFirstPrompts[conv.conversationId];
+        if (firstPrompt == null ? void 0 : firstPrompt.toLowerCase().includes(query)) return true;
+        return false;
+      });
     }
     return groupConversationsByTime(filtered, true);
-  }, [apiConversations, searchQuery]);
+  }, [apiConversations, searchQuery, conversationFirstPrompts]);
   const effectiveCustomer = (0, import_react13.useMemo)(() => {
     return __spreadProps(__spreadValues({}, customer), {
       customer_id: customerId
@@ -5859,6 +5861,9 @@ var AIAgentPanel = ({
         effectiveCustomer,
         showPoweredBy,
         actions,
+        initialPrompt,
+        initialMessage,
+        hideInitialPrompt,
         followOnQuestions,
         followOnPrompt,
         agentOptions,
@@ -5869,7 +5874,8 @@ var AIAgentPanel = ({
         totalContextTokens: mergedContext.totalTokens || 0,
         maxContextTokens,
         enableContextDetailView,
-        onConversationCreated: handleConversationCreated
+        onConversationCreated: handleConversationCreated,
+        conversationInitialPrompt: activeConv.conversationInitialPrompt
       }
     )), loadingConversationId && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react13.default.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ import_react13.default.createElement(MessageIcon, null), /* @__PURE__ */ import_react13.default.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react13.default.createElement("p", null, "Loading agent..."))),
     /* @__PURE__ */ import_react13.default.createElement(
@@ -5883,7 +5889,8 @@ var AIAgentPanel = ({
       /* @__PURE__ */ import_react13.default.createElement(DialogFooter, null, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ import_react13.default.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
     )
   );
-};
+});
+AIAgentPanel.displayName = "AIAgentPanel";
 var AIAgentPanel_default = AIAgentPanel;
 
 // src/hooks/useConversationStore.ts

package/dist/index.mjs

@@ -3636,6 +3636,7 @@ var AIChatPanel = ({
   const prevIdleRef = useRef5(true);
   const hasNotifiedCompletionRef = useRef5(true);
   const latestHistoryRef = useRef5(initialHistory);
+  const initialPromptSentRef = useRef5(false);
   useEffect7(() => {
     if (!initialHistory) return;
     setHistory((prev) => {
@@ -3880,11 +3881,22 @@ var AIChatPanel = ({
     const promptToSend = promptText;
     if (!promptToSend || !promptToSend.trim()) return;
     setIsLoading(true);
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    const promptKey = `${timestamp}:${promptToSend.trim()}`;
+    setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
+      [promptKey]: { content: "", callId: "" }
+    }));
+    setLastPrompt(promptToSend.trim());
+    setLastKey(promptKey);
+    setTimeout(() => {
+      scrollToBottom();
+    }, 0);
     console.log("AIChatPanel.continueChat - about to call ensureConversation");
     ensureConversation().then((convId) => {
       console.log("AIChatPanel.continueChat - ensureConversation resolved with:", convId);
       const messagesAndHistory = [];
       Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+        if (historyPrompt === promptKey) return;
         let promptForHistory = historyPrompt;
         const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
         if (isoTimestampRegex.test(historyPrompt)) {
@@ -3897,13 +3909,8 @@ var AIChatPanel = ({
         messagesAndHistory.push({ role: "user", content: promptForHistory });
         messagesAndHistory.push({ role: "assistant", content: historyEntry.content });
       });
-      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-      const promptKey = `${timestamp}:${promptToSend.trim()}`;
-      setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
-        [promptKey]: { content: "", callId: "" }
-      }));
       let fullPromptToSend = promptToSend.trim();
-      if (Object.keys(history).length === 0 && promptTemplate) {
+      if (messagesAndHistory.length === 0 && promptTemplate) {
         fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
       }
       if (followOnPrompt) {
@@ -3930,17 +3937,12 @@ ${followOnPrompt}`;
         // Use the conversation ID from ensureConversation
         newController
       );
-      setLastPrompt(promptToSend.trim());
       setLastMessages(messagesAndHistory);
-      setLastKey(promptKey);
       if (convId && onConversationCreated) {
         setTimeout(() => {
           onConversationCreated(convId);
         }, 100);
       }
-      setTimeout(() => {
-        scrollToBottom();
-      }, 0);
     });
   }, [
     idle,
@@ -4095,50 +4097,11 @@ ${followOnPrompt}`;
     };
   }, []);
   useEffect7(() => {
-    const hasLoadedHistory = initialHistory && Object.keys(initialHistory).length > 0;
-    if (!project_id) {
-      return;
+    if (initialPrompt && initialPrompt !== "" && !initialPromptSentRef.current) {
+      initialPromptSentRef.current = true;
+      continueChat(initialPrompt);
     }
-    if (initialPrompt && initialPrompt !== "" && initialPrompt !== lastPrompt && !hasLoadedHistory) {
-      setIsLoading(true);
-      setThinkingBlocks([]);
-      setCurrentThinkingIndex(0);
-      setUserHasScrolled(false);
-      ensureConversation().then((convId) => {
-        const controller = new AbortController();
-        setLastController(controller);
-        const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-        const promptKey = `${timestamp}:${initialPrompt}`;
-        setHistory({ [promptKey]: { content: "", callId: "" } });
-        let fullPrompt = initialPrompt;
-        if (promptTemplate) {
-          fullPrompt = promptTemplate.replace("{{prompt}}", initialPrompt);
-        }
-        send(
-          fullPrompt,
-          [],
-          [
-            ...dataWithExtras(),
-            { key: "--messages", data: "0" }
-          ],
-          true,
-          true,
-          service,
-          convId,
-          // Use conversation ID from ensureConversation
-          controller
-        );
-        setLastPrompt(initialPrompt);
-        setLastMessages([]);
-        setLastKey(promptKey);
-        if (convId && onConversationCreated) {
-          setTimeout(() => {
-            onConversationCreated(convId);
-          }, 100);
-        }
-      });
-    }
-  }, [initialPrompt, initialHistory, ensureConversation, promptTemplate, send, dataWithExtras, service, lastPrompt, project_id, onConversationCreated]);
+  }, [initialPrompt, continueChat]);
   const CodeBlock = useCallback2((_a) => {
     var _b = _a, { node, inline, className, children } = _b, props = __objRest(_b, ["node", "inline", "className", "children"]);
     const match = /language-(\w+)/.exec(className || "");
@@ -4193,7 +4156,13 @@ ${followOnPrompt}`;
         variant: "default",
         size: "sm",
         className: "ai-chat-agent-suggestion__button",
-        onClick: () => onAgentChange(agentId)
+        onClick: () => {
+          onAgentChange(agentId);
+          setTimeout(() => {
+            var _a;
+            (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "auto" });
+          }, 50);
+        }
       },
       "Switch"
     ));
@@ -4649,6 +4618,9 @@ var ChatPanelWrapper = ({
   effectiveCustomer,
   showPoweredBy,
   actions,
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions,
   followOnPrompt,
   agentOptions,
@@ -4659,7 +4631,8 @@ var ChatPanelWrapper = ({
   totalContextTokens,
   maxContextTokens,
   enableContextDetailView,
-  onConversationCreated
+  onConversationCreated,
+  conversationInitialPrompt
 }) => {
   var _a, _b;
   const convAgentProfile = getAgent(activeConv.agentId);
@@ -4695,6 +4668,7 @@ var ChatPanelWrapper = ({
   const mcpServers = useMemo4(() => {
     return (convAgentProfile == null ? void 0 : convAgentProfile.mcpServers) || EMPTY_ARRAY;
   }, [convAgentProfile == null ? void 0 : convAgentProfile.mcpServers]);
+  const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
   if (!convAgentMetadata) return null;
   return /* @__PURE__ */ React12.createElement(
     "div",
@@ -4711,10 +4685,10 @@ var ChatPanelWrapper = ({
         title: "",
         theme,
         promptTemplate: convAgentMetadata.displayPromptTemplate || "{{prompt}}",
-        initialMessage: convAgentMetadata.displayStartMessageOrPrompt === "message" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0,
-        initialPrompt: convAgentMetadata.displayStartMessageOrPrompt === "prompt" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0,
+        initialMessage: initialMessage || (convAgentMetadata.displayStartMessageOrPrompt === "message" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0),
+        initialPrompt: effectiveInitialPrompt || (convAgentMetadata.displayStartMessageOrPrompt === "prompt" ? convAgentMetadata.displayInitialMessageOrPrompt : void 0),
         placeholder: convAgentMetadata.displayPlaceholder || "Type a message...",
-        hideInitialPrompt: (_a = convAgentMetadata.displayHideInitialPrompt) != null ? _a : true,
+        hideInitialPrompt: (_a = hideInitialPrompt != null ? hideInitialPrompt : convAgentMetadata.displayHideInitialPrompt) != null ? _a : true,
         data: chatPanelData,
         agent: activeConv.agentId,
         conversation: activeConv.conversationId.startsWith("new-") ? void 0 : activeConv.conversationId,
@@ -4748,7 +4722,7 @@ var ChatPanelWrapper = ({
   );
 };
 ChatPanelWrapper.displayName = "ChatPanelWrapper";
-var AIAgentPanel = ({
+var AIAgentPanel = React12.forwardRef(({
   agents,
   defaultAgent,
   customerId,
@@ -4780,11 +4754,14 @@ var AIAgentPanel = ({
   showPoweredBy = true,
   conversation,
   actions = [],
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions = [],
   followOnPrompt = "",
   historyListLimit = 50,
   showConversationHistory = true
-}) => {
+}, ref) => {
   var _a, _b, _c, _d;
   const [isCollapsed, setIsCollapsed] = useState8(defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState8(() => {
@@ -4866,6 +4843,29 @@ var AIAgentPanel = ({
   activeConversationsRef.current = activeConversations;
   const currentConversationIdRef = useRef6(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
+  React12.useImperativeHandle(ref, () => ({
+    startNewConversation: (prompt, agent) => {
+      const targetAgent = agent || currentAgentId;
+      const tempId = `new-${Date.now()}`;
+      setActiveConversations((prev) => {
+        const next = new Map(prev);
+        next.set(tempId, {
+          conversationId: tempId,
+          stableKey: tempId,
+          agentId: targetAgent,
+          history: {},
+          isLoading: false,
+          title: "New conversation",
+          conversationInitialPrompt: prompt
+        });
+        return next;
+      });
+      setCurrentConversationId(tempId);
+      if (onConversationChange) {
+        onConversationChange(tempId);
+      }
+    }
+  }), [currentAgentId, onConversationChange]);
   const [showContextNotification, setShowContextNotification] = useState8(false);
   const prevContextRef = useRef6(null);
   const contextNotificationTimeoutRef = useRef6(null);
@@ -5209,15 +5209,17 @@ var AIAgentPanel = ({
     let filtered = apiConversations;
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(
-        (conv) => {
-          var _a2, _b2;
-          return ((_a2 = conv.title) == null ? void 0 : _a2.toLowerCase().includes(query)) || ((_b2 = conv.summary) == null ? void 0 : _b2.toLowerCase().includes(query));
-        }
-      );
+      filtered = filtered.filter((conv) => {
+        var _a2, _b2;
+        if ((_a2 = conv.title) == null ? void 0 : _a2.toLowerCase().includes(query)) return true;
+        if ((_b2 = conv.summary) == null ? void 0 : _b2.toLowerCase().includes(query)) return true;
+        const firstPrompt = conversationFirstPrompts[conv.conversationId];
+        if (firstPrompt == null ? void 0 : firstPrompt.toLowerCase().includes(query)) return true;
+        return false;
+      });
     }
     return groupConversationsByTime(filtered, true);
-  }, [apiConversations, searchQuery]);
+  }, [apiConversations, searchQuery, conversationFirstPrompts]);
   const effectiveCustomer = useMemo4(() => {
     return __spreadProps(__spreadValues({}, customer), {
       customer_id: customerId
@@ -5826,6 +5828,9 @@ var AIAgentPanel = ({
         effectiveCustomer,
         showPoweredBy,
         actions,
+        initialPrompt,
+        initialMessage,
+        hideInitialPrompt,
         followOnQuestions,
         followOnPrompt,
         agentOptions,
@@ -5836,7 +5841,8 @@ var AIAgentPanel = ({
         totalContextTokens: mergedContext.totalTokens || 0,
         maxContextTokens,
         enableContextDetailView,
-        onConversationCreated: handleConversationCreated
+        onConversationCreated: handleConversationCreated,
+        conversationInitialPrompt: activeConv.conversationInitialPrompt
       }
     )), loadingConversationId && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React12.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ React12.createElement(MessageIcon, null), /* @__PURE__ */ React12.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ React12.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React12.createElement("p", null, "Loading agent..."))),
     /* @__PURE__ */ React12.createElement(
@@ -5850,7 +5856,8 @@ var AIAgentPanel = ({
       /* @__PURE__ */ React12.createElement(DialogFooter, null, /* @__PURE__ */ React12.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ React12.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
     )
   );
-};
+});
+AIAgentPanel.displayName = "AIAgentPanel";
 var AIAgentPanel_default = AIAgentPanel;
 
 // src/hooks/useConversationStore.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.16.9",
+  "version": "0.17.0",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -9,9 +9,9 @@
     "build": "tsup index.ts --format cjs,esm --dts",
     "lint": "tsc",
     "storybook": "storybook dev -p 6006",
-  "build-storybook": "storybook build",
-  "test": "vitest run",
-  "test:watch": "vitest"
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "homepage": "https://llmasaservice.io",
   "repository": {

package/src/AIAgentPanel.tsx

@@ -47,6 +47,7 @@ export interface ActiveConversation {
   history: Record<string, { content: string; callId: string }>;
   isLoading: boolean;
   title: string;
+  conversationInitialPrompt?: string; // Per-conversation initial prompt for programmatic start
 }
 
 /**
@@ -58,6 +59,13 @@ export interface AgentConfig {
   avatarUrl?: string;
 }
 
+/**
+ * Imperative handle for programmatic control of AIAgentPanel
+ */
+export interface AIAgentPanelHandle {
+  startNewConversation: (prompt: string, agent?: string) => void;
+}
+
 /**
  * Props for AIAgentPanel
  */
@@ -120,7 +128,10 @@ export interface AIAgentPanelProps {
     style?: string;
   }[];
 
-  // Follow-on
+  // Initial prompt and follow-on
+  initialPrompt?: string;
+  initialMessage?: string;
+  hideInitialPrompt?: boolean;
   followOnQuestions?: string[];
   followOnPrompt?: string;
 
@@ -351,6 +362,9 @@ interface ChatPanelWrapperProps {
   effectiveCustomer: any;
   showPoweredBy: boolean;
   actions: any[];
+  initialPrompt?: string;
+  initialMessage?: string;
+  hideInitialPrompt?: boolean;
   followOnQuestions: string[];
   followOnPrompt: string;
   agentOptions: any[];
@@ -364,6 +378,8 @@ interface ChatPanelWrapperProps {
   enableContextDetailView: boolean;
   // Conversation creation callback
   onConversationCreated: (tempId: string, realId: string) => void;
+  // Per-conversation initial prompt
+  conversationInitialPrompt?: string;
 }
 
 // Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
@@ -382,6 +398,9 @@ const ChatPanelWrapper = (({
   effectiveCustomer,
   showPoweredBy,
   actions,
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions,
   followOnPrompt,
   agentOptions,
@@ -393,6 +412,7 @@ const ChatPanelWrapper = (({
   maxContextTokens,
   enableContextDetailView,
   onConversationCreated,
+  conversationInitialPrompt,
 }) => {
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile?.metadata;
@@ -441,6 +461,9 @@ const ChatPanelWrapper = (({
     return convAgentProfile?.mcpServers || EMPTY_ARRAY;
   }, [convAgentProfile?.mcpServers]);
   
+  // Determine which initialPrompt to use - conversation-specific OR prop-based
+  const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
+  
   if (!convAgentMetadata) return null;
   
   return (
@@ -456,17 +479,19 @@ const ChatPanelWrapper = (({
         theme={theme}
         promptTemplate={convAgentMetadata.displayPromptTemplate || '{{prompt}}'}
         initialMessage={
-          convAgentMetadata.displayStartMessageOrPrompt === 'message'
+          initialMessage || 
+          (convAgentMetadata.displayStartMessageOrPrompt === 'message'
             ? convAgentMetadata.displayInitialMessageOrPrompt
-            : undefined
+            : undefined)
         }
         initialPrompt={
-          convAgentMetadata.displayStartMessageOrPrompt === 'prompt'
+          effectiveInitialPrompt || 
+          (convAgentMetadata.displayStartMessageOrPrompt === 'prompt'
             ? convAgentMetadata.displayInitialMessageOrPrompt
-            : undefined
+            : undefined)
         }
         placeholder={convAgentMetadata.displayPlaceholder || 'Type a message...'}
-        hideInitialPrompt={convAgentMetadata.displayHideInitialPrompt ?? true}
+        hideInitialPrompt={hideInitialPrompt ?? convAgentMetadata.displayHideInitialPrompt ?? true}
         data={chatPanelData}
         agent={activeConv.agentId}
         conversation={activeConv.conversationId.startsWith('new-') ? undefined : activeConv.conversationId}
@@ -502,7 +527,7 @@ const ChatPanelWrapper = (({
 
 ChatPanelWrapper.displayName = 'ChatPanelWrapper';
 
-const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
+const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   agents,
   defaultAgent,
   customerId,
@@ -534,11 +559,14 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   showPoweredBy = true,
   conversation,
   actions = [],
+  initialPrompt,
+  initialMessage,
+  hideInitialPrompt,
   followOnQuestions = [],
   followOnPrompt = '',
   historyListLimit = 50,
   showConversationHistory = true,
-}) => {
+}, ref) => {
   // Panel state
   const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
@@ -653,6 +681,33 @@ const AIAgentPanel: React.FC<AIAgentPanelProps> = ({
   const currentConversationIdRef = useRef<string | null>(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
 
+  // Imperative handle for programmatic control
+  React.useImperativeHandle(ref, () => ({
+    startNewConversation: (prompt: string, agent?: string) => {
+      const targetAgent = agent || currentAgentId;
+      const tempId = `new-${Date.now()}`;
+      
+      setActiveConversations(prev => {
+        const next = new Map(prev);
+        next.set(tempId, {
+          conversationId: tempId,
+          stableKey: tempId,
+          agentId: targetAgent,
+          history: {},
+          isLoading: false,
+          title: 'New conversation',
+          conversationInitialPrompt: prompt,
+        });
+        return next;
+      });
+      
+      setCurrentConversationId(tempId);
+      if (onConversationChange) {
+        onConversationChange(tempId);
+      }
+    }
+  }), [currentAgentId, onConversationChange]);
+
   // Context change notification state
   const [showContextNotification, setShowContextNotification] = useState(false);
   const prevContextRef = useRef<string | null>(null);
@@ -1138,15 +1193,24 @@ console.log("apiKey", apiKey);
     // Filter by search query
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(conv => 
-        conv.title?.toLowerCase().includes(query) ||
-        conv.summary?.toLowerCase().includes(query)
-      );
+      filtered = filtered.filter(conv => {
+        // Check title from API
+        if (conv.title?.toLowerCase().includes(query)) return true;
+        
+        // Check summary from API
+        if (conv.summary?.toLowerCase().includes(query)) return true;
+        
+        // Check the first prompt (what's actually displayed in the UI)
+        const firstPrompt = conversationFirstPrompts[conv.conversationId];
+        if (firstPrompt?.toLowerCase().includes(query)) return true;
+        
+        return false;
+      });
     }
     
     // Group all conversations, show all groups even if empty
     return groupConversationsByTime(filtered, true);
-  }, [apiConversations, searchQuery]);
+  }, [apiConversations, searchQuery, conversationFirstPrompts]);
 
   // Build effective customer object with required customerId
   const effectiveCustomer = useMemo(() => {
@@ -2022,6 +2086,9 @@ console.log("apiKey", apiKey);
             effectiveCustomer={effectiveCustomer}
             showPoweredBy={showPoweredBy}
             actions={actions}
+            initialPrompt={initialPrompt}
+            initialMessage={initialMessage}
+            hideInitialPrompt={hideInitialPrompt}
             followOnQuestions={followOnQuestions}
             followOnPrompt={followOnPrompt}
             agentOptions={agentOptions}
@@ -2033,6 +2100,7 @@ console.log("apiKey", apiKey);
             maxContextTokens={maxContextTokens}
             enableContextDetailView={enableContextDetailView}
             onConversationCreated={handleConversationCreated}
+            conversationInitialPrompt={activeConv.conversationInitialPrompt}
           />
         ))}
         
@@ -2090,7 +2158,9 @@ console.log("apiKey", apiKey);
       </Dialog>
     </div>
   );
-};
+});
+
+AIAgentPanel.displayName = 'AIAgentPanel';
 
 export default AIAgentPanel;
 

package/src/AIChatPanel.tsx

@@ -703,6 +703,8 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
   const hasNotifiedCompletionRef = useRef<boolean>(true);
   // Store the latest processed history for callbacks (doesn't trigger re-renders)
   const latestHistoryRef = useRef<Record<string, HistoryEntry>>(initialHistory);
+  // Track if we've sent the initial prompt (prevents loops)
+  const initialPromptSentRef = useRef<boolean>(false);
 
   // Sync new entries from initialHistory into local history state
   // This allows parent components to inject messages (e.g., page-based agent suggestions)
@@ -1063,13 +1065,39 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     
     setIsLoading(true);
     
+    // === OPTIMISTIC UPDATE: Show prompt immediately in UI ===
+    // Generate unique key using ISO timestamp prefix + prompt
+    const timestamp = new Date().toISOString();
+    const promptKey = `${timestamp}:${promptToSend.trim()}`;
+    
+    // Add prompt to history IMMEDIATELY - this makes it appear in the UI right away
+    setHistory((prevHistory) => ({
+      ...prevHistory,
+      [promptKey]: { content: '', callId: '' },
+    }));
+    
+    // Store the key for later use
+    setLastPrompt(promptToSend.trim());
+    setLastKey(promptKey);
+    
+    // Scroll to bottom immediately to show the new prompt
+    // Use setTimeout to ensure the DOM has updated
+    setTimeout(() => {
+      scrollToBottom();
+    }, 0);
+    
+    // Now proceed with API calls in the background (conversation creation + LLM call)
     // Ensure conversation exists before sending (matches ChatPanel)
     console.log('AIChatPanel.continueChat - about to call ensureConversation');
     ensureConversation().then((convId) => {
       console.log('AIChatPanel.continueChat - ensureConversation resolved with:', convId);
       // Build messagesAndHistory from history (matches ChatPanel)
+      // IMPORTANT: Exclude the current prompt (promptKey) since it's new and we're sending it now
       const messagesAndHistory: { role: string; content: string }[] = [];
       Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+        // Skip the current prompt we just added optimistically
+        if (historyPrompt === promptKey) return;
+        
         // Strip timestamp prefix from prompt before using it (matches ChatPanel)
         let promptForHistory = historyPrompt;
         const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
@@ -1085,19 +1113,10 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         messagesAndHistory.push({ role: 'assistant', content: historyEntry.content });
       });
       
-      // Generate unique key using ISO timestamp prefix + prompt (matches ChatPanel)
-      const timestamp = new Date().toISOString();
-      const promptKey = `${timestamp}:${promptToSend.trim()}`;
-      
-      // Set history entry before sending (matches ChatPanel)
-      setHistory((prevHistory) => ({
-        ...prevHistory,
-        [promptKey]: { content: '', callId: '' },
-      }));
-      
       // Build the full prompt - only apply template for first message (matches ChatPanel)
+      // Check if this is the first message by seeing if messagesAndHistory is empty
       let fullPromptToSend = promptToSend.trim();
-      if (Object.keys(history).length === 0 && promptTemplate) {
+      if (messagesAndHistory.length === 0 && promptTemplate) {
         fullPromptToSend = promptTemplate.replace('{{prompt}}', fullPromptToSend);
       }
       
@@ -1126,9 +1145,7 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
         newController
       );
       
-      setLastPrompt(promptToSend.trim());
       setLastMessages(messagesAndHistory);
-      setLastKey(promptKey);
       
       // Notify parent of new conversation ID AFTER send() has started
       // This prevents the component from being remounted before send() runs
@@ -1138,12 +1155,6 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           onConversationCreated(convId);
         }, 100);
       }
-      
-      // Scroll to bottom after adding the new prompt to show it immediately
-      // Use setTimeout to ensure the DOM has updated with the new history entry
-      setTimeout(() => {
-        scrollToBottom();
-      }, 0);
     });
   }, [
     idle,
@@ -1376,69 +1387,14 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
     };
   }, []); // Empty deps - only run cleanup on unmount
 
-  // Auto-send initialPrompt when it changes (matches ChatPanel behavior)
-  // IMPORTANT: Skip if we have initialHistory - that means we're loading an existing conversation
+  // Auto-send initialPrompt exactly once when component mounts
+  // Simple behavior matching original ChatPanel - just send the prompt
   useEffect(() => {
-    // Don't auto-send initialPrompt if we loaded existing history
-    // This prevents unwanted LLM calls when switching to loaded conversations
-    const hasLoadedHistory = initialHistory && Object.keys(initialHistory).length > 0;
-    
-    // Don't proceed if project_id is not yet available
-    if (!project_id) {
-      return;
-    }
-    
-    if (initialPrompt && initialPrompt !== '' && initialPrompt !== lastPrompt && !hasLoadedHistory) {
-      setIsLoading(true);
-      setThinkingBlocks([]);
-      setCurrentThinkingIndex(0);
-      setUserHasScrolled(false); // Enable auto-scroll for new prompt
-      
-      // Ensure conversation exists before sending (matches ChatPanel)
-      ensureConversation().then((convId) => {
-        const controller = new AbortController();
-        setLastController(controller);
-        
-        // Generate timestamp-prefixed key (matches ChatPanel)
-        const timestamp = new Date().toISOString();
-        const promptKey = `${timestamp}:${initialPrompt}`;
-        
-        // Set history entry before sending (matches ChatPanel)
-        setHistory({ [promptKey]: { content: '', callId: '' } });
-        
-        // Build prompt with template
-        let fullPrompt = initialPrompt;
-        if (promptTemplate) {
-          fullPrompt = promptTemplate.replace('{{prompt}}', initialPrompt);
-        }
-        
-        send(
-          fullPrompt,
-          [],
-          [
-            ...dataWithExtras(),
-            { key: '--messages', data: '0' },
-          ],
-          true,
-          true,
-          service,
-          convId, // Use conversation ID from ensureConversation
-          controller
-        );
-        
-        setLastPrompt(initialPrompt);
-        setLastMessages([]);
-        setLastKey(promptKey);
-        
-        // Notify parent of new conversation ID AFTER send() has started
-        if (convId && onConversationCreated) {
-          setTimeout(() => {
-            onConversationCreated(convId);
-          }, 100);
-        }
-      });
+    if (initialPrompt && initialPrompt !== '' && !initialPromptSentRef.current) {
+      initialPromptSentRef.current = true;
+      continueChat(initialPrompt);
     }
-  }, [initialPrompt, initialHistory, ensureConversation, promptTemplate, send, dataWithExtras, service, lastPrompt, project_id, onConversationCreated]);
+  }, [initialPrompt, continueChat]);
 
   // ============================================================================
   // Render Helpers
@@ -1581,7 +1537,13 @@ const AIChatPanel: React.FC<AIChatPanelProps> = ({
           variant="default"
           size="sm"
           className="ai-chat-agent-suggestion__button"
-          onClick={() => onAgentChange(agentId)}
+          onClick={() => {
+            onAgentChange(agentId);
+            // Scroll to bottom after a brief delay to let React re-render
+            setTimeout(() => {
+              bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+            }, 50);
+          }}
         >
           Switch
         </Button>

package/src/components/ui/Button.tsx

@@ -57,3 +57,5 @@ export default Button;
 
 
 
+
+

package/src/components/ui/Dialog.tsx

@@ -153,3 +153,5 @@ export default Dialog;
 
 
 
+
+

package/src/components/ui/Input.tsx

@@ -33,3 +33,5 @@ export default Input;
 
 
 
+
+

package/src/components/ui/Select.tsx

@@ -156,3 +156,5 @@ export default Select;
 
 
 
+
+

package/src/components/ui/Tooltip.tsx

@@ -73,3 +73,5 @@ export default Tooltip;
 
 
 
+
+

package/src/components/ui/index.ts

@@ -20,3 +20,5 @@ export type { DialogProps, DialogFooterProps } from './Dialog';
 
 
 
+
+

package/DEPLOYMENT.md

@@ -1,193 +0,0 @@
-# 📦 Deployment Guide
-
-## Current Status
-- ✅ Build successful (version 0.16.8)
-- ✅ Tests passing (17 tests passed)
-- ✅ Ready to publish
-
----
-
-## Step 1: Login to npm
-
-**Important:** You need to be logged in as the owner of the `@hef2024` scope.
-
-```bash
-npm login
-```
-
-You'll be prompted for:
-- Username (must be the owner of @hef2024 scope)
-- Password
-- Email
-- OTP (if 2FA is enabled)
-
-Verify you're logged in:
-```bash
-npm whoami
-```
-
-**Note:** If this is the first time publishing this package, make sure you have access to the `@hef2024` scope on npm. If you don't own this scope, you'll need to either:
-1. Create the scope on npm (if available)
-2. Change the package name in `package.json` to a scope you own
-3. Publish without a scope (remove `@hef2024/` prefix)
-
----
-
-## Step 2: Publish the Package
-
-```bash
-# Make sure you're in the llmasaservice-ui-1 directory
-cd /Users/indomitablehef/llmasaservice-ui-1
-
-# Build the package (already done, but good to verify)
-npm run build
-
-# Run tests (already done, but good to verify)
-npm test
-
-# Publish to npm
-npm publish --access public
-```
-
-**Note:** The package name is `@hef2024/llmasaservice-ui` and it's scoped, so `--access public` is required.
-
-**If you get a 404 error:**
-- This might be the first publish of this package
-- Make sure you're logged in as the owner of the `@hef2024` scope
-- If the scope doesn't exist or you don't have access, you'll need to either create it on npm or change the package name
-
----
-
-## Step 3: Unlink in FocusedFit
-
-Navigate to your FocusedFit project directory and run:
-
-```bash
-# Unlink the local development version
-npm unlink @hef2024/llmasaservice-ui
-
-# Or if it was linked as 'llmasaservice-ui':
-npm unlink llmasaservice-ui
-
-# Restore to published version
-npm install
-```
-
-**Alternative:** If the unlink doesn't work, you can manually remove the link:
-
-```bash
-# Check if it's linked
-npm ls @hef2024/llmasaservice-ui
-
-# Remove node_modules and package-lock.json
-rm -rf node_modules package-lock.json
-
-# Reinstall
-npm install
-```
-
----
-
-## Step 4: Install Published Version in FocusedFit
-
-In your FocusedFit project:
-
-```bash
-# Install the published version
-npm install @hef2024/llmasaservice-ui@latest
-
-# Or install a specific version
-npm install @hef2024/llmasaservice-ui@0.16.8
-```
-
----
-
-## Step 5: Verify Installation
-
-In your FocusedFit project:
-
-```bash
-# Check installed version
-npm ls @hef2024/llmasaservice-ui
-
-# Should show something like:
-# @hef2024/llmasaservice-ui@0.16.8
-```
-
----
-
-## Troubleshooting
-
-### If unlink fails:
-```bash
-# Remove the symlink manually
-rm -rf node_modules/@hef2024/llmasaservice-ui
-rm -rf node_modules/llmasaservice-ui
-
-# Clear npm cache
-npm cache clean --force
-
-# Reinstall
-npm install
-```
-
-### If you see "local" or "file:" in npm ls:
-The package is still linked. Make sure you:
-1. Ran `npm unlink` in FocusedFit
-2. Removed `node_modules` and `package-lock.json`
-3. Ran `npm install` again
-
-### To verify the link is removed:
-```bash
-# In FocusedFit directory
-cat node_modules/@hef2024/llmasaservice-ui/package.json
-# Should NOT show a "link" field or point to a local path
-```
-
----
-
-## Quick Reference
-
-### In llmasaservice-ui-1 (this package):
-```bash
-npm run build    # Build the package
-npm test         # Run tests
-npm publish --access public  # Publish to npm
-```
-
-### In FocusedFit (consuming app):
-```bash
-npm unlink @hef2024/llmasaservice-ui  # Unlink local version
-npm install                            # Restore dependencies
-npm install @hef2024/llmasaservice-ui@latest  # Install published version
-```
-
----
-
-## Version Bumping (for future releases)
-
-When you need to publish a new version:
-
-1. Update version in `package.json`:
-   ```json
-   "version": "0.16.9"
-   ```
-
-2. Build and test:
-   ```bash
-   npm run build
-   npm test
-   ```
-
-3. Commit and tag:
-   ```bash
-   git add package.json
-   git commit -m "Bump version to 0.16.9"
-   git tag v0.16.9
-   git push origin main --tags
-   ```
-
-4. Publish:
-   ```bash
-   npm publish --access public
-   ```