@aigentyc/chat-sdk 0.5.1 → 0.5.3

package/dist/{chunk-UTEGHMBN.js → chunk-MQJ6MGTC.js}

@@ -1,7 +1,7 @@
 "use client";
 import { useAutoResize, useIsMobile, useLiveChat, usePreviewEmbed } from './chunk-P7UR37HP.js';
 import { useTheme } from './chunk-VQPOUMBC.js';
-import { Conversation, ConversationContent, ConversationEmptyState, MessageAttachments, MessageAttachment, Sources, SourcesTrigger, SourcesContent, Source, MessageFeedback, Loader } from './chunk-CNGIOCLR.js';
+import { Conversation, anchorToLatestTurn, FollowLatestTurn, ConversationContent, ConversationEmptyState, MessageAttachments, MessageAttachment, Sources, SourcesTrigger, SourcesContent, Source, MessageFeedback, LATEST_TURN_ATTR, Loader } from './chunk-O5TPHZRP.js';
 import { useI18n } from './chunk-LDQVDUUJ.js';
 import { ToolRenderer } from './chunk-CW6LCVNC.js';
 import { useChatContext, useSlots, renderSlot } from './chunk-JAEXKKSE.js';
@@ -985,6 +985,16 @@ function ChatInterface(props) {
   const [cartOpen, setCartOpen] = useState(false);
   const [storeOrigin, _setStoreOrigin] = useState(null);
   const isProcessing = status === "streaming";
+  const anchorLatestTurn = props.scrollAnchor !== "bottom";
+  const latestUserId = useMemo(() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (m.role !== "user") continue;
+      if (hideFirstUserMessage && i === 0) continue;
+      return m.id;
+    }
+    return void 0;
+  }, [messages, hideFirstUserMessage]);
   useEffect(() => {
     if (messages.length > 0 && showWelcome) setShowWelcome(false);
     if (messages.length === 0 && !showWelcome) setShowWelcome(true);
@@ -1086,134 +1096,146 @@ function ChatInterface(props) {
         onCartUpdate: (count) => setCartCount(count)
       }
     ),
-    /* @__PURE__ */ jsx(Conversation, { className: "flex-1", children: /* @__PURE__ */ jsxs(ConversationContent, { className: "px-[15px] md:px-[40px] py-6 sm:py-8 w-full space-y-6", children: [
-      messages.length === 0 && renderSlot("emptyState", {}, ConversationEmptyState, slots),
-      messages.map((message, messageIndex) => {
-        if (hideFirstUserMessage && messageIndex === 0 && message.role === "user") return null;
-        if (message.role === "system") {
-          return /* @__PURE__ */ jsx("div", { children: renderSlot("systemMessage", { message: message.content }, SystemMessage, slots) }, message.id);
-        }
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `group ${message.role === "assistant" ? "is-assistant" : "is-user"}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                MessageAttachments,
+    /* @__PURE__ */ jsxs(
+      Conversation,
+      {
+        className: "flex-1",
+        targetScrollTop: anchorLatestTurn ? anchorToLatestTurn : void 0,
+        ...anchorLatestTurn ? { initial: "instant", resize: "instant" } : {},
+        children: [
+          anchorLatestTurn && /* @__PURE__ */ jsx(FollowLatestTurn, { turnKey: latestUserId }),
+          /* @__PURE__ */ jsxs(ConversationContent, { className: "px-[15px] md:px-[40px] py-6 sm:py-8 w-full space-y-6", children: [
+            messages.length === 0 && renderSlot("emptyState", {}, ConversationEmptyState, slots),
+            messages.map((message, messageIndex) => {
+              if (hideFirstUserMessage && messageIndex === 0 && message.role === "user") return null;
+              if (message.role === "system") {
+                return /* @__PURE__ */ jsx("div", { children: renderSlot("systemMessage", { message: message.content }, SystemMessage, slots) }, message.id);
+              }
+              return /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  className: message.role === "user" ? "mb-2" : "mr-auto ml-0 mb-2",
-                  children: (message.parts || []).filter((p) => p.type === "file" && p.url).map((p, i) => /* @__PURE__ */ jsx(
-                    MessageAttachment,
-                    {
-                      className: "size-32",
-                      data: {
-                        type: "file",
-                        url: p.url,
-                        mediaType: p.mediaType ?? "",
-                        filename: p.filename
+                  className: `group ${message.role === "assistant" ? "is-assistant" : "is-user"}`,
+                  ...message.id === latestUserId ? { [LATEST_TURN_ATTR]: "" } : {},
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      MessageAttachments,
+                      {
+                        className: message.role === "user" ? "mb-2" : "mr-auto ml-0 mb-2",
+                        children: (message.parts || []).filter((p) => p.type === "file" && p.url).map((p, i) => /* @__PURE__ */ jsx(
+                          MessageAttachment,
+                          {
+                            className: "size-32",
+                            data: {
+                              type: "file",
+                              url: p.url,
+                              mediaType: p.mediaType ?? "",
+                              filename: p.filename
+                            }
+                          },
+                          `${message.id}-file-${i}`
+                        ))
                       }
-                    },
-                    `${message.id}-file-${i}`
-                  ))
-                }
-              ),
-              (() => {
-                const parts = (message.parts || []).filter(
-                  (p) => p.type !== "file" && !(p.type === "text" && !(p.text || "").trim())
-                );
-                return props.messagePartOrder === "stream-order" ? parts : [...parts].sort((a, b) => {
-                  const textFirst = props.messagePartOrder !== "tools-first";
-                  if (a.type === "text" && b.type !== "text") return textFirst ? -1 : 1;
-                  if (a.type !== "text" && b.type === "text") return textFirst ? 1 : -1;
-                  return 0;
-                });
-              })().map((part, i) => {
-                if (part.type === "text") {
-                  if (message.role === "assistant") {
-                    return /* @__PURE__ */ jsx("div", { children: renderSlot("assistantMessage", { message, partIndex: i, text: part.text || "" }, DefaultAssistantMessage, slots) }, `${message.id}-${i}`);
-                  }
-                  return /* @__PURE__ */ jsx("div", { children: renderSlot("userMessage", { message, partIndex: i, text: part.text || "" }, DefaultUserMessage, slots) }, `${message.id}-${i}`);
-                }
-                if (part.type.startsWith("tool-")) {
-                  const toolName = part.type.replace("tool-", "");
-                  if (toolName === "requestHumanChat") return null;
-                  let output = part.output;
-                  if (typeof output === "string") {
-                    try {
-                      output = JSON.parse(output);
-                    } catch {
-                    }
-                  }
-                  const result = output && typeof output === "object" && !Array.isArray(output) && ("data" in output || "uiRenderMode" in output) ? output : { data: output };
-                  return /* @__PURE__ */ jsx(
-                    ChatErrorBoundary,
-                    {
-                      label: `tool "${toolName}"`,
-                      children: /* @__PURE__ */ jsx(
-                        ToolRenderer,
-                        {
-                          toolName,
-                          state: part.state ?? "output-available",
-                          args: part.input ?? {},
-                          result,
-                          onSendMessage: handleSubmit,
-                          isProcessing
+                    ),
+                    (() => {
+                      const parts = (message.parts || []).filter(
+                        (p) => p.type !== "file" && !(p.type === "text" && !(p.text || "").trim())
+                      );
+                      return props.messagePartOrder === "stream-order" ? parts : [...parts].sort((a, b) => {
+                        const textFirst = props.messagePartOrder !== "tools-first";
+                        if (a.type === "text" && b.type !== "text") return textFirst ? -1 : 1;
+                        if (a.type !== "text" && b.type === "text") return textFirst ? 1 : -1;
+                        return 0;
+                      });
+                    })().map((part, i) => {
+                      if (part.type === "text") {
+                        if (message.role === "assistant") {
+                          return /* @__PURE__ */ jsx("div", { children: renderSlot("assistantMessage", { message, partIndex: i, text: part.text || "" }, DefaultAssistantMessage, slots) }, `${message.id}-${i}`);
                         }
-                      )
-                    },
-                    `${message.id}-tool-${i}`
-                  );
-                }
-                return null;
-              }),
-              showSources && message.role === "assistant" && (() => {
-                const kbSources = extractKbSources(message.parts);
-                if (kbSources.length === 0) return null;
-                return /* @__PURE__ */ jsxs(Sources, { children: [
-                  /* @__PURE__ */ jsx(SourcesTrigger, { count: kbSources.length }),
-                  /* @__PURE__ */ jsx(SourcesContent, { children: kbSources.map((s, idx) => /* @__PURE__ */ jsx(
-                    Source,
-                    {
-                      href: s.sourceUrl ?? "#",
-                      title: s.documentName || s.pageTitle || `Source ${idx + 1}`
-                    },
-                    `${message.id}-src-${idx}`
-                  )) })
-                ] });
-              })(),
-              message.role === "assistant" && renderSlot("feedback", {
-                messageId: message.id,
-                projectId: config.projectId,
-                sessionId,
-                apiKey: config.apiKey,
-                apiEndpoint: config.apiEndpoint,
-                textContent: (message.parts || []).filter((p) => p.type === "text").map((p) => p.text || "").join("\n") || (typeof message.content === "string" ? message.content : "")
-              }, MessageFeedback, slots)
-            ]
-          },
-          message.id
-        );
-      }),
-      status === "streaming" && (() => {
-        const lastMessage = messages[messages.length - 1];
-        if (!lastMessage || lastMessage.role !== "assistant") return true;
-        const hasText = (lastMessage.parts || []).some(
-          (p) => p.type === "text" && (p.text || "").trim()
-        );
-        const allToolsComplete = (lastMessage.parts || []).filter((p) => p.type.startsWith("tool-")).every((p) => p.state === "output-available");
-        return allToolsComplete && !hasText;
-      })() && /* @__PURE__ */ jsx(Loader, { text: t("thinking") }),
-      status === "error" && renderSlot(
-        "error",
-        {
-          error,
-          onRetry: retryLastTurn,
-          onNewConversation: handleNewConversation
-        },
-        ChatError,
-        slots
-      )
-    ] }) }),
+                        return /* @__PURE__ */ jsx("div", { children: renderSlot("userMessage", { message, partIndex: i, text: part.text || "" }, DefaultUserMessage, slots) }, `${message.id}-${i}`);
+                      }
+                      if (part.type.startsWith("tool-")) {
+                        const toolName = part.type.replace("tool-", "");
+                        if (toolName === "requestHumanChat") return null;
+                        let output = part.output;
+                        if (typeof output === "string") {
+                          try {
+                            output = JSON.parse(output);
+                          } catch {
+                          }
+                        }
+                        const result = output && typeof output === "object" && !Array.isArray(output) && ("data" in output || "uiRenderMode" in output) ? output : { data: output };
+                        return /* @__PURE__ */ jsx(
+                          ChatErrorBoundary,
+                          {
+                            label: `tool "${toolName}"`,
+                            children: /* @__PURE__ */ jsx(
+                              ToolRenderer,
+                              {
+                                toolName,
+                                state: part.state ?? "output-available",
+                                args: part.input ?? {},
+                                result,
+                                onSendMessage: handleSubmit,
+                                isProcessing
+                              }
+                            )
+                          },
+                          `${message.id}-tool-${i}`
+                        );
+                      }
+                      return null;
+                    }),
+                    showSources && message.role === "assistant" && (() => {
+                      const kbSources = extractKbSources(message.parts);
+                      if (kbSources.length === 0) return null;
+                      return /* @__PURE__ */ jsxs(Sources, { children: [
+                        /* @__PURE__ */ jsx(SourcesTrigger, { count: kbSources.length }),
+                        /* @__PURE__ */ jsx(SourcesContent, { children: kbSources.map((s, idx) => /* @__PURE__ */ jsx(
+                          Source,
+                          {
+                            href: s.sourceUrl ?? "#",
+                            title: s.documentName || s.pageTitle || `Source ${idx + 1}`
+                          },
+                          `${message.id}-src-${idx}`
+                        )) })
+                      ] });
+                    })(),
+                    message.role === "assistant" && renderSlot("feedback", {
+                      messageId: message.id,
+                      projectId: config.projectId,
+                      sessionId,
+                      apiKey: config.apiKey,
+                      apiEndpoint: config.apiEndpoint,
+                      textContent: (message.parts || []).filter((p) => p.type === "text").map((p) => p.text || "").join("\n") || (typeof message.content === "string" ? message.content : "")
+                    }, MessageFeedback, slots)
+                  ]
+                },
+                message.id
+              );
+            }),
+            status === "streaming" && (() => {
+              const lastMessage = messages[messages.length - 1];
+              if (!lastMessage || lastMessage.role !== "assistant") return true;
+              const hasText = (lastMessage.parts || []).some(
+                (p) => p.type === "text" && (p.text || "").trim()
+              );
+              const allToolsComplete = (lastMessage.parts || []).filter((p) => p.type.startsWith("tool-")).every((p) => p.state === "output-available");
+              return allToolsComplete && !hasText;
+            })() && /* @__PURE__ */ jsx(Loader, { text: t("thinking") }),
+            status === "error" && renderSlot(
+              "error",
+              {
+                error,
+                onRetry: retryLastTurn,
+                onNewConversation: handleNewConversation
+              },
+              ChatError,
+              slots
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-[15px] md:px-[40px] pb-2", style: { backgroundColor: "var(--ac-background)" }, children: [
       props.pageQuestions && props.pageQuestions.length > 0 && /* @__PURE__ */ jsx(
         QuickQuestions,
@@ -1247,6 +1269,35 @@ function ChatInterface(props) {
     /* @__PURE__ */ jsx("span", { "data-session-id": sessionId, className: "hidden" })
   ] });
 }
+
+// src/core/panel-width.ts
+var DEFAULT_PANEL_WIDTH = 780;
+var MIN_PANEL_WIDTH = 320;
+var SIDE_PANEL_GAP_PX = 10;
+function panelMaxWidth(width) {
+  if (typeof width === "number") {
+    if (!Number.isFinite(width) || width <= 0) return `${DEFAULT_PANEL_WIDTH}px`;
+    return `${Math.max(MIN_PANEL_WIDTH, Math.round(width))}px`;
+  }
+  if (typeof width === "string") {
+    const value = width.trim();
+    if (value && isValidLength(value)) return value;
+  }
+  return `${DEFAULT_PANEL_WIDTH}px`;
+}
+function panelRenderedWidth(width) {
+  return `min(100vw, ${panelMaxWidth(width)})`;
+}
+function sidePanelOffset(width) {
+  return `calc(${panelRenderedWidth(width)} + ${SIDE_PANEL_GAP_PX}px)`;
+}
+function sidePanelWidth(preferredPx, width) {
+  return `min(${preferredPx}px, calc(100vw - ${panelRenderedWidth(width)} - ${SIDE_PANEL_GAP_PX * 2}px))`;
+}
+function isValidLength(value) {
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return true;
+  return CSS.supports("max-width", value);
+}
 function FloatingButton({
   onClick,
   position,
@@ -1410,7 +1461,7 @@ function useLiveChatOrThrow() {
   if (!ctx) throw new Error("LiveChat sub-view rendered outside LiveChatProvider \u2014 this should never happen");
   return ctx;
 }
-function LiveChatPanel({ isWidgetOpen, isRightSide, zIndex }) {
+function LiveChatPanel({ isWidgetOpen, isRightSide, zIndex, panelWidth }) {
   const lc = useLiveChat();
   if (!lc) return null;
   const isActive = lc.state !== "ai" || lc.showIdentityForm;
@@ -1434,9 +1485,9 @@ function LiveChatPanel({ isWidgetOpen, isRightSide, zIndex }) {
         backgroundColor: "var(--ac-background)",
         borderColor: "var(--ac-border)",
         zIndex,
-        width: "min(420px, calc(100vw - 800px))",
+        width: sidePanelWidth(420, panelWidth),
         height: "75vh",
-        ...isRightSide ? { right: "790px" } : { left: "790px" },
+        ...isRightSide ? { right: sidePanelOffset(panelWidth) } : { left: sidePanelOffset(panelWidth) },
         transform: showPanel ? "translateY(-50%) translateX(0)" : `translateY(-50%) ${isRightSide ? "translateX(20px)" : "translateX(-20px)"}`,
         opacity: showPanel ? 1 : 0,
         pointerEvents: showPanel ? "auto" : "none",
@@ -1824,7 +1875,7 @@ function EndedView() {
     )
   ] });
 }
-function PreviewEmbedPanel({ isOpen, isRightSide, zIndex }) {
+function PreviewEmbedPanel({ isOpen, isRightSide, zIndex, panelWidth }) {
   const previewEmbed = usePreviewEmbed();
   if (!previewEmbed) return null;
   const { preview, closePreview } = previewEmbed;
@@ -1837,9 +1888,9 @@ function PreviewEmbedPanel({ isOpen, isRightSide, zIndex }) {
         backgroundColor: "var(--ac-background)",
         borderColor: "var(--ac-border)",
         zIndex,
-        width: "min(560px, calc(100vw - 800px))",
+        width: sidePanelWidth(560, panelWidth),
         height: "70vh",
-        ...isRightSide ? { right: "790px" } : { left: "790px" },
+        ...isRightSide ? { right: sidePanelOffset(panelWidth) } : { left: sidePanelOffset(panelWidth) },
         transform: showPanel ? "translateY(-50%) translateX(0)" : `translateY(-50%) ${isRightSide ? "translateX(20px)" : "translateX(-20px)"}`,
         opacity: showPanel ? 1 : 0,
         pointerEvents: showPanel ? "auto" : "none",
@@ -1880,6 +1931,6 @@ function PreviewEmbedPanel({ isOpen, isRightSide, zIndex }) {
   );
 }
 
-export { CartDrawer, ChatError, ChatErrorBoundary, ChatFooter, ChatHeader, ChatInput, ChatInterface, FloatingButton, LiveChatPanel, MobileLiveChatDrawer, PreviewEmbedPanel, QuickQuestions, SystemMessage, WelcomePage };
-//# sourceMappingURL=chunk-UTEGHMBN.js.map
-//# sourceMappingURL=chunk-UTEGHMBN.js.map
+export { CartDrawer, ChatError, ChatErrorBoundary, ChatFooter, ChatHeader, ChatInput, ChatInterface, DEFAULT_PANEL_WIDTH, FloatingButton, LiveChatPanel, MobileLiveChatDrawer, PreviewEmbedPanel, QuickQuestions, SystemMessage, WelcomePage, panelMaxWidth };
+//# sourceMappingURL=chunk-MQJ6MGTC.js.map
+//# sourceMappingURL=chunk-MQJ6MGTC.js.map