@docsearch/react 4.6.2 → 5.0.0-beta.0

package/dist/esm/sidepanel.js

@@ -0,0 +1,773 @@
+import { t as _objectSpread2 } from "./objectSpread2-BNmiQYyW.js";
+import { n as isAppleDevice, t as ACTION_KEY_DEFAULT } from "./keyboard-BkSdCzTU.js";
+import { n as SearchIcon, t as _objectWithoutProperties } from "./objectWithoutProperties-phqYxDS0.js";
+import { a as AlgoliaLogo, f as RecentIcon, l as CloseIcon, m as LoadingIcon, p as SparklesIcon, t as useSearchClient } from "./useSearchClient-mIHVB6ga.js";
+import { S as AlertIcon, _ as BackIcon, a as MemoizedMarkdown, b as MoreVerticalIcon, c as buildDummyAskAiHit, d as getMessageContent, f as isAIToolPart, g as ConversationPromptSuggestions, h as FeedbackActions, i as groupConsecutiveToolResults, l as extractLinksFromMessage, m as SourcesPanel, n as useAskAi, o as ToolCall, r as Menu, s as EMPTY_TOOLS, t as useSuggestedQuestions, u as getAgentPromptSuggestions, v as NewConversationIcon, x as StopIcon, y as ConversationHistoryIcon } from "./useSuggestedQuestions-D2TGVPsI.js";
+import { version } from "./version.js";
+import { DocSearch, useDocSearch } from "@docsearch/core";
+import React, { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+//#region src/icons/SendIcon.tsx
+const SendIcon = () => {
+	return /* @__PURE__ */ React.createElement("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "24",
+		height: "24",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, /* @__PURE__ */ React.createElement("path", { d: "m5 12 7-7 7 7" }), /* @__PURE__ */ React.createElement("path", { d: "M12 19V5" }));
+};
+
+//#endregion
+//#region src/icons/ExpandIcon.tsx
+const ExpandIcon = () => {
+	return /* @__PURE__ */ React.createElement("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "14",
+		viewBox: "0 0 13 13",
+		fill: "none"
+	}, /* @__PURE__ */ React.createElement("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M8 0.5C8 0.223858 8.22386 0 8.5 0H12.5C12.7761 0 13 0.223858 13 0.5V4.5C13 4.77614 12.7761 5 12.5 5C12.2239 5 12 4.77614 12 4.5V1.70711L8.18689 5.52022C7.99162 5.71548 7.67504 5.71548 7.47978 5.52022C7.28452 5.32496 7.28452 5.00838 7.47978 4.81311L11.2929 1H8.5C8.22386 1 8 0.776142 8 0.5ZM5.52022 7.47978C5.71548 7.67504 5.71548 7.99162 5.52022 8.18689L1.70711 12H4.5C4.77614 12 5 12.2239 5 12.5C5 12.7761 4.77614 13 4.5 13H0.5C0.223858 13 0 12.7761 0 12.5V8.5C0 8.22386 0.223858 8 0.5 8C0.776142 8 1 8.22386 1 8.5V11.2929L4.81311 7.47978C5.00838 7.28452 5.32496 7.28452 5.52022 7.47978Z",
+		fill: "currentColor"
+	}));
+};
+
+//#endregion
+//#region src/icons/FolderIcon.tsx
+const FolderIcon = () => {
+	return /* @__PURE__ */ React.createElement("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }));
+};
+
+//#endregion
+//#region src/icons/EditIcon.tsx
+const EditIcon = () => {
+	return /* @__PURE__ */ React.createElement("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), /* @__PURE__ */ React.createElement("path", { d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" }));
+};
+
+//#endregion
+//#region src/useIsMobile.ts
+const useIsMobile = () => {
+	const [isMobile, setIsMobile] = React.useState(false);
+	React.useEffect(() => {
+		const checkForMobile = () => {
+			const isMobileMediaQuery = window.matchMedia("(max-width: 768px)");
+			setIsMobile(isMobileMediaQuery.matches);
+		};
+		checkForMobile();
+		window.addEventListener("resize", checkForMobile);
+		return () => {
+			window.removeEventListener("resize", checkForMobile);
+		};
+	}, []);
+	return isMobile;
+};
+
+//#endregion
+//#region src/Sidepanel/ConversationHistoryScreen.tsx
+const ConversationHistoryScreen = ({ conversations, selectConversation }) => {
+	const [items, setItems] = React.useState(() => conversations.getAll());
+	const handleRemoveConversation = (item) => {
+		conversations.remove(item);
+		setItems(conversations.getAll());
+	};
+	return /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-ConversationHistoryScreen" }, /* @__PURE__ */ React.createElement("ul", null, items.map((item) => /* @__PURE__ */ React.createElement("li", {
+		key: item.objectID,
+		className: "DocSearch-Sidepanel-RecentConversation"
+	}, /* @__PURE__ */ React.createElement("a", {
+		href: item.url,
+		onClick: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			selectConversation(item);
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-RecentConversation-container" }, /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-RecentConversation-icon" }, /* @__PURE__ */ React.createElement(RecentIcon, null)), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-RecentConversation-content" }, /* @__PURE__ */ React.createElement("span", { className: "DocSearch-Sidepanel-RecentConversation-title" }, item.hierarchy.lvl1)), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Hit-action" }, /* @__PURE__ */ React.createElement("button", {
+		className: "DocSearch-Hit-action-button",
+		type: "button",
+		title: "Remove conversation from history",
+		onClick: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			handleRemoveConversation(item);
+		}
+	}, /* @__PURE__ */ React.createElement(CloseIcon, null)))))))));
+};
+
+//#endregion
+//#region src/Sidepanel/AggregatedSearchBlock.tsx
+const before = "Searched for ";
+const separator = ", ";
+const lastSeparator = " and ";
+const after = "";
+function AggregatedSearchBlock({ queries }) {
+	return /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-MessageContent-Tool Tool--AggregatedResult" }, /* @__PURE__ */ React.createElement(SearchIcon, { size: 18 }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", null, before), queries.map((q, idx) => /* @__PURE__ */ React.createElement(Fragment, { key: q + idx }, /* @__PURE__ */ React.createElement("span", { className: "DocSearch-AskAiScreen-MessageContent-Tool-Query" }, "\"", q, "\""), idx < queries.length - 2 && separator, idx === queries.length - 2 && lastSeparator)), after));
+}
+
+//#endregion
+//#region src/Sidepanel/ConversationScreen.tsx
+const ConversationExchange = React.forwardRef(({ exchange, translations = {}, isLastExchange, conversations, onFeedback, status, streamError, memoryEnabled, tools, onSelectPromptSuggestion }, conversationRef) => {
+	var _userMessage$metadata, _assistantMessage$met, _userContent$text;
+	const { userMessage, assistantMessage } = exchange;
+	const { reasoningText = "Reasoning...", thinkingText = "Thinking...", searchingText = "Searching...", relatedSourcesText, stoppedStreamingText = "You stopped this response", preToolCallText = "Searching...", toolCallResultText = "Searched for", copyButtonText = "Copy", copyButtonCopiedText = "Copied!", errorTitleText = "Chat error", savedMemoryToolResultText = "Saved to memory", memoryToolResultText = "Used memory to enhance results", suggestedPromptsTitleText = "Suggested prompts" } = translations;
+	const assistantContent = useMemo(() => getMessageContent(assistantMessage), [assistantMessage]);
+	const userContent = useMemo(() => getMessageContent(userMessage), [userMessage]);
+	const assistantParts = useMemo(() => groupConsecutiveToolResults((assistantMessage === null || assistantMessage === void 0 ? void 0 : assistantMessage.parts) || []), [assistantMessage]);
+	const urlsToDisplay = React.useMemo(() => extractLinksFromMessage(assistantMessage), [assistantMessage]);
+	const suggestedPrompts = React.useMemo(() => {
+		if (!isLastExchange) return [];
+		return getAgentPromptSuggestions((assistantMessage === null || assistantMessage === void 0 ? void 0 : assistantMessage.parts) || []);
+	}, [assistantMessage, isLastExchange]);
+	const wasStopped = ((_userMessage$metadata = userMessage.metadata) === null || _userMessage$metadata === void 0 ? void 0 : _userMessage$metadata.stopped) || (assistantMessage === null || assistantMessage === void 0 || (_assistantMessage$met = assistantMessage.metadata) === null || _assistantMessage$met === void 0 ? void 0 : _assistantMessage$met.stopped);
+	const isThinking = ["submitted", "streaming"].includes(status) && !assistantParts.some((part) => part.type !== "step-start");
+	const showActions = !wasStopped && (!isLastExchange || isLastExchange && status === "ready" && Boolean(assistantMessage));
+	const messageId = (assistantMessage === null || assistantMessage === void 0 ? void 0 : assistantMessage.id) || exchange.id;
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "DocSearch-AskAiScreen-Response-Container",
+		ref: conversationRef
+	}, /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-Response" }, /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-Message DocSearch-AskAiScreen-Message--user" }, /* @__PURE__ */ React.createElement("p", { className: "DocSearch-AskAiScreen-Query" }, (_userContent$text = userContent === null || userContent === void 0 ? void 0 : userContent.text) !== null && _userContent$text !== void 0 ? _userContent$text : "")), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-Message DocSearch-AskAiScreen-Message--assistant" }, /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-MessageContent" }, status === "error" && streamError && isLastExchange && /* @__PURE__ */ React.createElement("div", {
+		className: "DocSearch-AskAiScreen-Error",
+		role: "alert"
+	}, /* @__PURE__ */ React.createElement(AlertIcon, { "aria-hidden": "true" }), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-Error-Content" }, /* @__PURE__ */ React.createElement("h4", { className: "DocSearch-AskAiScreen-Error-Title" }, errorTitleText), /* @__PURE__ */ React.createElement(MemoizedMarkdown, {
+		content: streamError.message,
+		copyButtonText: "",
+		copyButtonCopiedText: "",
+		isStreaming: false
+	}))), assistantParts.map((part, idx) => {
+		const index = idx;
+		if (part.type === "reasoning" && part.state === "streaming") return /* @__PURE__ */ React.createElement("div", {
+			key: index,
+			className: "DocSearch-AskAiScreen-MessageContent-Reasoning shimmer"
+		}, /* @__PURE__ */ React.createElement(LoadingIcon, { className: "DocSearch-AskAiScreen-SmallerLoadingIcon" }), /* @__PURE__ */ React.createElement("span", { className: "shimmer" }, reasoningText));
+		if (part.type === "aggregated-tool-call") return /* @__PURE__ */ React.createElement(AggregatedSearchBlock, {
+			key: index,
+			queries: part.queries
+		});
+		if (isAIToolPart(part)) return /* @__PURE__ */ React.createElement(ToolCall, {
+			key: index,
+			part,
+			translations: {
+				preToolCallText,
+				searchingText,
+				toolCallResultText,
+				savedMemoryToolResultText,
+				memoryToolResultText
+			},
+			tools,
+			memoryEnabled
+		});
+		if (typeof part === "string") return /* @__PURE__ */ React.createElement(MemoizedMarkdown, {
+			key: index,
+			content: part,
+			copyButtonText,
+			copyButtonCopiedText,
+			isStreaming: false
+		});
+		if (part.type === "text") return /* @__PURE__ */ React.createElement(MemoizedMarkdown, {
+			key: index,
+			content: part.text,
+			copyButtonText,
+			copyButtonCopiedText,
+			isStreaming: part.state === "streaming"
+		});
+		return null;
+	}), isThinking && isLastExchange && assistantParts.length === 0 && /* @__PURE__ */ React.createElement("div", {
+		className: "DocSearch-AskAiScreen-MessageContent-Thinking",
+		role: "status"
+	}, /* @__PURE__ */ React.createElement("span", { className: "shimmer" }, thinkingText), /* @__PURE__ */ React.createElement("span", { className: "DocSearch-AskAi-Thinking-Skeleton shimmer" }), /* @__PURE__ */ React.createElement("span", { className: "DocSearch-AskAi-Thinking-Skeleton DocSearch-AskAi-Thinking-Skeleton--short shimmer" }))), wasStopped && /* @__PURE__ */ React.createElement("p", { className: "DocSearck-AskAiScreen-MessageContent-Stopped" }, stoppedStreamingText)), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-AskAiScreen-Answer-Footer" }, /* @__PURE__ */ React.createElement(SourcesPanel, {
+		links: urlsToDisplay,
+		titleText: relatedSourcesText
+	}), /* @__PURE__ */ React.createElement(FeedbackActions, {
+		isSidepanel: true,
+		id: messageId,
+		showActions,
+		latestAssistantMessageContent: (assistantContent === null || assistantContent === void 0 ? void 0 : assistantContent.text) || null,
+		translations,
+		conversations,
+		onFeedback
+	})), suggestedPrompts.length > 0 && /* @__PURE__ */ React.createElement(ConversationPromptSuggestions, {
+		title: suggestedPromptsTitleText,
+		suggestions: suggestedPrompts,
+		onSelectPromptSuggestion
+	})));
+});
+const ConversationScreen = memo(({ exchanges, translations = {}, handleFeedback, tools = EMPTY_TOOLS, status, conversations, streamError, memoryEnabled, onSelectPromptSuggestion }) => {
+	const { conversationDisclaimer = "Answers are generated with AI which can make mistakes. Verify responses." } = translations;
+	const mostRecentExchangeRef = React.useRef(null);
+	const totalExchanges = exchanges.length;
+	React.useEffect(() => {
+		if (mostRecentExchangeRef.current) mostRecentExchangeRef.current.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		});
+	}, [totalExchanges]);
+	return /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-ConversationScreen" }, /* @__PURE__ */ React.createElement("p", { className: "DocSearch-Sidepanel-ConversationScreen-disclaimer" }, conversationDisclaimer), exchanges.slice().map((exchange, idx) => {
+		const isLastExchange = idx === exchanges.length - 1;
+		return /* @__PURE__ */ React.createElement(ConversationExchange, {
+			key: exchange.id,
+			exchange,
+			translations,
+			isLastExchange,
+			ref: isLastExchange ? mostRecentExchangeRef : null,
+			tools,
+			status,
+			conversations,
+			streamError,
+			memoryEnabled,
+			onFeedback: handleFeedback,
+			onSelectPromptSuggestion
+		});
+	}));
+});
+
+//#endregion
+//#region src/Sidepanel/NewConversationScreen.tsx
+const NewConversationScreen = ({ suggestedQuestions, onSelectQuestion, translations = {} }) => {
+	const { titleText = "How can I help you today?", introductionText = "I search through your documentation to help you find setup guides, feature details and troubleshooting tips, fast." } = translations;
+	return /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-NewConversationScreen" }, /* @__PURE__ */ React.createElement("h4", { className: "DocSearch-Sidepanel-Screen--title" }, titleText), /* @__PURE__ */ React.createElement("p", { className: "DocSearch-Sidepanel-Screen--introduction" }, introductionText), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-List" }, suggestedQuestions.map((q) => /* @__PURE__ */ React.createElement("button", {
+		key: q.objectID,
+		type: "button",
+		className: "DocSearch-Sidepanel-SuggestedQuestion",
+		title: "View conversation",
+		onClick: () => {
+			onSelectQuestion(q);
+		}
+	}, /* @__PURE__ */ React.createElement("span", null, q.question)))));
+};
+
+//#endregion
+//#region src/Sidepanel/PromptForm.tsx
+const MAX_PROMPT_ROWS = 8;
+const PromptForm = React.forwardRef(({ exchanges, isStreaming, translations = {}, onSend, onStopStreaming }, ref) => {
+	const isMobile = useIsMobile();
+	const [userPrompt, setUserPrompt] = React.useState("");
+	const promptRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => promptRef.current);
+	const { promptPlaceholderText = "Ask a question", promptAnsweringText = "Answering...", promptAskAnotherQuestionText = "Ask another question", promptDisclaimerText = "Answers are generated with AI which can make mistakes.", promptLabelText = "Press Enter to send, or Shift and Enter for new line.", promptAriaLabelText = "Prompt input" } = translations;
+	const managePromptHeight = () => {
+		if (!promptRef.current) return;
+		const textArea = promptRef.current;
+		const styles = getComputedStyle(textArea);
+		const lineHeight = parseFloat(styles.lineHeight);
+		const padding = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+		textArea.style.height = "auto";
+		const fullHeight = textArea.scrollHeight;
+		const maxHeight = MAX_PROMPT_ROWS * lineHeight + padding;
+		textArea.style.overflowY = fullHeight > maxHeight ? "auto" : "hidden";
+		textArea.style.height = `${Math.min(fullHeight, maxHeight)}px`;
+	};
+	const handleSend = () => {
+		if (isStreaming) return;
+		const prompt = userPrompt.trim();
+		if (prompt === "") return;
+		onSend(prompt);
+		setUserPrompt("");
+		requestAnimationFrame(() => {
+			var _promptRef$current;
+			(_promptRef$current = promptRef.current) === null || _promptRef$current === void 0 || _promptRef$current.focus();
+			managePromptHeight();
+		});
+	};
+	const handleKeyDown = (e) => {
+		if (isStreaming) return;
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	};
+	React.useLayoutEffect(() => {
+		managePromptHeight();
+	}, [isMobile]);
+	let promptPlaceholder = promptPlaceholderText;
+	if (isStreaming) promptPlaceholder = promptAnsweringText;
+	else if (exchanges.length > 0) promptPlaceholder = promptAskAnotherQuestionText;
+	return /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-Prompt" }, /* @__PURE__ */ React.createElement("form", {
+		className: "DocSearch-Sidepanel-Prompt--form",
+		onSubmit: (e) => {
+			e.preventDefault();
+			if (isStreaming) return;
+			handleSend();
+		}
+	}, /* @__PURE__ */ React.createElement("textarea", {
+		ref: promptRef,
+		placeholder: promptPlaceholder,
+		className: "DocSearch-Sidepanel-Prompt--textarea",
+		value: userPrompt,
+		"aria-label": promptAriaLabelText,
+		"aria-labelledby": "prompt-label",
+		autoComplete: "off",
+		translate: "no",
+		rows: isMobile ? 1 : 2,
+		onKeyDown: handleKeyDown,
+		onInput: managePromptHeight,
+		onChange: (e) => setUserPrompt(e.target.value)
+	}), /* @__PURE__ */ React.createElement("span", {
+		id: "prompt-label",
+		className: "sr-only"
+	}, promptLabelText), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-Prompt--actions" }, isStreaming && /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		title: "Stop streaming",
+		className: "DocSearch-Sidepanel-Prompt--stop",
+		onClick: onStopStreaming
+	}, /* @__PURE__ */ React.createElement(StopIcon, null)), !isStreaming && /* @__PURE__ */ React.createElement("button", {
+		type: "submit",
+		"aria-label": "Send question",
+		title: "Send question",
+		className: "DocSearch-Sidepanel-Prompt--submit",
+		"aria-disabled": userPrompt === ""
+	}, /* @__PURE__ */ React.createElement(SendIcon, null)))), /* @__PURE__ */ React.createElement("p", { className: "DocSearch-Sidepanel-Prompt--disclaimer" }, promptDisclaimerText));
+});
+
+//#endregion
+//#region src/Sidepanel/setSidepanelSearchClient.ts
+const setSidepanelSearchClient = (client) => {
+	if (/docsearch-sidepanel.js \(.*\)/.test(client.transporter.algoliaAgent.value) === false) client.addAlgoliaAgent("docsearch-sidepanel", version);
+	return client;
+};
+
+//#endregion
+//#region src/Sidepanel/SidepanelHeader.tsx
+const BackButton = ({ onBack, mobile = false, disabled = false }) => {
+	return /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: `DocSearch-Action DocSearch-Sidepanel-Action-back${mobile ? " mobile" : ""}`,
+		title: "Go back to previous screen",
+		"aria-disabled": disabled,
+		onClick: disabled ? void 0 : onBack
+	}, /* @__PURE__ */ React.createElement(BackIcon, null));
+};
+const SidepanelHeader = React.memo(({ sidepanelState, exchanges, setSidepanelState, onNewConversation, onToggleExpanded, onClose, translations = {}, hasConversations, isStreaming }) => {
+	const { title = "Ask AI", conversationHistoryTitle = "My conversation history", newConversationText = "Start a new conversation", viewConversationHistoryText = "Conversation history" } = translations;
+	const isMobile = useIsMobile();
+	const goToConversationHistory = () => {
+		setSidepanelState("conversation-history");
+	};
+	const onBack = React.useCallback(() => {
+		if (exchanges.length > 0) setSidepanelState("conversation");
+		else setSidepanelState("new-conversation");
+	}, [exchanges, setSidepanelState]);
+	const newConversationDisabled = sidepanelState === "new-conversation" && exchanges.length < 1;
+	let header = title;
+	if (sidepanelState === "conversation-history") header = conversationHistoryTitle;
+	if (isMobile) header = title;
+	return /* @__PURE__ */ React.createElement("header", { className: "DocSearch-Sidepanel-Header" }, /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-Header--left" }, /* @__PURE__ */ React.createElement(BackButton, {
+		mobile: true,
+		disabled: isStreaming,
+		onBack
+	}), sidepanelState === "conversation-history" && /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Divider" }), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "DocSearch-Action",
+		title: newConversationText,
+		onClick: onNewConversation
+	}, /* @__PURE__ */ React.createElement(EditIcon, null)), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Divider" }), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "DocSearch-Action",
+		title: viewConversationHistoryText,
+		onClick: goToConversationHistory
+	}, /* @__PURE__ */ React.createElement(FolderIcon, null))), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-Header--center" }, /* @__PURE__ */ React.createElement(BackButton, {
+		disabled: isStreaming,
+		onBack
+	}), /* @__PURE__ */ React.createElement(SparklesIcon, { className: "DocSearch-Sidepanel-Header-TitleIcon" }), /* @__PURE__ */ React.createElement("h2", { className: "DocSearch-Sidepanel-Title" }, header)), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-Header--right" }, sidepanelState !== "conversation-history" && (!newConversationDisabled || hasConversations) && /* @__PURE__ */ React.createElement(Menu, null, /* @__PURE__ */ React.createElement(Menu.Trigger, {
+		className: "DocSearch-Action DocSearch-Sidepanel-Action-menu",
+		disabled: isStreaming
+	}, /* @__PURE__ */ React.createElement(MoreVerticalIcon, null)), /* @__PURE__ */ React.createElement(Menu.Content, null, !newConversationDisabled && /* @__PURE__ */ React.createElement(Menu.Item, { onClick: onNewConversation }, /* @__PURE__ */ React.createElement(NewConversationIcon, null), newConversationText), hasConversations && /* @__PURE__ */ React.createElement(Menu.Item, { onClick: goToConversationHistory }, /* @__PURE__ */ React.createElement(ConversationHistoryIcon, null), viewConversationHistoryText))), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "DocSearch-Action DocSearch-Sidepanel-Action-expand",
+		title: "Expand or collapse Sidepanel",
+		onClick: onToggleExpanded
+	}, /* @__PURE__ */ React.createElement(ExpandIcon, null)), /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		className: "DocSearch-Action DocSearch-Sidepanel-Action-close",
+		title: "Close Sidepanel",
+		onClick: onClose
+	}, /* @__PURE__ */ React.createElement(CloseIcon, null))));
+});
+
+//#endregion
+//#region src/Sidepanel/useManageSidepanelLayout.ts
+function useManageSidepanelLayout({ variant, selectors, isOpen, expectedWidth, side }) {
+	const targetRef = useRef(null);
+	const lastSelectorRef = useRef(null);
+	const isMobile = useIsMobile();
+	useLayoutEffect(() => {
+		if (variant === "floating" || isMobile) return;
+		if (lastSelectorRef.current !== selectors) {
+			if (targetRef.current) {
+				if (side === "left") targetRef.current.style.marginLeft = "";
+				else targetRef.current.style.marginRight = "";
+				targetRef.current.style.transition = "";
+			}
+			const nextTarget = Array.from(document.querySelectorAll(selectors))[0] || document.body;
+			targetRef.current = nextTarget;
+			lastSelectorRef.current = selectors;
+			if (targetRef.current) targetRef.current.style.transition = `margin-${side} 280ms cubic-bezier(0.22, 1, 0.36, 1)`;
+		}
+		const target = targetRef.current;
+		if (!target) return;
+		const offset = isOpen ? expectedWidth : "0px";
+		if (side === "left") target.style.marginLeft = offset;
+		else target.style.marginRight = offset;
+	}, [
+		isOpen,
+		expectedWidth,
+		variant,
+		selectors,
+		side,
+		isMobile
+	]);
+	useLayoutEffect(() => {
+		return () => {
+			if (targetRef.current) {
+				if (side === "left") targetRef.current.style.marginLeft = "";
+				else targetRef.current.style.marginRight = "";
+				targetRef.current.style.transition = "";
+			}
+		};
+	}, [side]);
+}
+
+//#endregion
+//#region src/Sidepanel/useSidepanelKeyboardEvents.ts
+function useSidepanelKeyboardEvents({ onClose, onOpen, isOpen, keyboardShortcuts }) {
+	useEffect(() => {
+		function onKeyDown(e) {
+			var _e$key;
+			if (isOpen && e.code === "Escape") {
+				onClose();
+				return;
+			}
+			if (!((keyboardShortcuts === null || keyboardShortcuts === void 0 ? void 0 : keyboardShortcuts["Ctrl/Cmd+I"]) !== false)) return;
+			if (((_e$key = e.key) === null || _e$key === void 0 ? void 0 : _e$key.toLowerCase()) === "i" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				if (isOpen) onClose();
+				else onOpen();
+			}
+		}
+		window.addEventListener("keydown", onKeyDown);
+		return () => {
+			window.removeEventListener("keydown", onKeyDown);
+		};
+	}, [
+		isOpen,
+		onClose,
+		onOpen,
+		keyboardShortcuts
+	]);
+}
+
+//#endregion
+//#region src/Sidepanel/useSidepanelWidth.ts
+const BASE_WIDTH = 360;
+const EXPANDED_WIDTH = 580;
+const useSidepanelWidth = ({ isExpanded, width, expandedWidth }) => {
+	const baseWidth = React.useMemo(() => {
+		return typeof width === "number" ? `${width}px` : width !== null && width !== void 0 ? width : `${BASE_WIDTH}px`;
+	}, [width]);
+	const resolvedExpandedWidth = React.useMemo(() => {
+		return typeof expandedWidth === "number" ? `${expandedWidth}px` : expandedWidth !== null && expandedWidth !== void 0 ? expandedWidth : `${EXPANDED_WIDTH}px`;
+	}, [expandedWidth]);
+	return isExpanded ? resolvedExpandedWidth : baseWidth;
+};
+
+//#endregion
+//#region src/Sidepanel/Sidepanel.tsx
+function SidepanelInner({ isOpen = false, onOpen, onClose, assistantId, apiKey, appId, indexName, variant = "floating", searchParameters, pushSelector, width, expandedWidth, suggestedQuestions: suggestedQuestionsEnabled = false, translations = {}, keyboardShortcuts, side = "right", initialMessage, tools = EMPTY_TOOLS, memory, indices }, ref) {
+	var _memory$enabled;
+	const [isExpanded, setIsExpanded] = React.useState(false);
+	const [sidepanelState, setSidepanelState] = React.useState("new-conversation");
+	const [stoppedStreaming, setStoppedStreaming] = React.useState(false);
+	const sidepanelContainerRef = React.useRef(null);
+	const promptInputRef = React.useRef(null);
+	const isMobile = useIsMobile();
+	const expectedWidth = useSidepanelWidth({
+		isExpanded,
+		width,
+		expandedWidth
+	});
+	const selectors = React.useMemo(() => pushSelector !== null && pushSelector !== void 0 ? pushSelector : "#root, main, .app, body", [pushSelector]);
+	const toggleIsExpanded = useCallback(() => {
+		setIsExpanded(!isExpanded);
+	}, [isExpanded]);
+	const searchClient = useSearchClient(appId, apiKey, setSidepanelSearchClient);
+	const { chatId, status, sendMessage, stopAskAiStreaming, isStreaming, exchanges, conversations, messages, sendFeedback, askAiError, startNewConversation, restoreConversation } = useAskAi({
+		appId,
+		indexName,
+		assistantId,
+		apiKey,
+		searchParameters,
+		tools,
+		memory,
+		indices
+	});
+	const suggestedQuestions = useSuggestedQuestions({
+		assistantId,
+		suggestedQuestionsEnabled,
+		searchClient
+	});
+	const prevStatus = React.useRef(status);
+	const handleSend = React.useCallback((prompt) => {
+		setStoppedStreaming(false);
+		sendMessage({ text: prompt });
+		setSidepanelState("conversation");
+	}, [sendMessage]);
+	const handleStartNewConversation = () => {
+		startNewConversation();
+		setSidepanelState("new-conversation");
+	};
+	const handleSelectQuestion = (question) => {
+		setStoppedStreaming(false);
+		startNewConversation();
+		sendMessage({ text: question.question }, { body: { suggestedQuestionId: question.objectID } });
+		setSidepanelState("conversation");
+	};
+	const handleStopStreaming = () => {
+		setStoppedStreaming(true);
+		stopAskAiStreaming();
+	};
+	const handleSelectConversation = React.useCallback((conversation) => {
+		if (conversation.messages) restoreConversation(conversation.messages, conversation.chatId);
+		else if (conversation.query) sendMessage({ text: conversation.query });
+		setSidepanelState("conversation");
+	}, [sendMessage, restoreConversation]);
+	useManageSidepanelLayout({
+		variant,
+		expectedWidth,
+		selectors,
+		isOpen,
+		side
+	});
+	useSidepanelKeyboardEvents({
+		onClose,
+		onOpen,
+		isOpen,
+		keyboardShortcuts
+	});
+	React.useImperativeHandle(ref, () => ({
+		open: onOpen,
+		close: onClose,
+		get isReady() {
+			return true;
+		},
+		get isOpen() {
+			return isOpen;
+		}
+	}), [
+		onOpen,
+		onClose,
+		isOpen
+	]);
+	React.useEffect(() => {
+		if (prevStatus.current === "streaming" && status === "ready") {
+			if (stoppedStreaming && messages.at(-1)) messages.at(-1).metadata = { stopped: true };
+			for (const part of messages[0].parts) if (part.type === "text") conversations.add(buildDummyAskAiHit(part.text, messages, chatId));
+		}
+		prevStatus.current = status;
+	}, [
+		conversations,
+		status,
+		messages,
+		stoppedStreaming,
+		chatId
+	]);
+	React.useEffect(() => {
+		function setFullViewportHeight() {
+			if (sidepanelContainerRef.current) {
+				const vh = window.innerHeight * .01;
+				sidepanelContainerRef.current.style.setProperty("--sp-vh", `${vh}px`);
+			}
+		}
+		setFullViewportHeight();
+		window.addEventListener("resize", setFullViewportHeight);
+		return () => {
+			window.removeEventListener("resize", setFullViewportHeight);
+		};
+	}, []);
+	React.useEffect(() => {
+		if (!initialMessage) return;
+		let selectedConversation;
+		if (initialMessage.messageId) {
+			var _conversations$getCon;
+			selectedConversation = (_conversations$getCon = conversations.getConversation) === null || _conversations$getCon === void 0 ? void 0 : _conversations$getCon.call(conversations, initialMessage.messageId);
+		}
+		if (selectedConversation) handleSelectConversation(selectedConversation);
+		else {
+			startNewConversation();
+			sendMessage({ text: initialMessage.query }, initialMessage.suggestedQuestionId ? { body: { suggestedQuestionId: initialMessage.suggestedQuestionId } } : {});
+			setSidepanelState("conversation");
+		}
+	}, [
+		initialMessage,
+		sendMessage,
+		conversations,
+		handleSelectConversation,
+		startNewConversation
+	]);
+	React.useEffect(() => {
+		if (isOpen && !isMobile) {
+			var _promptInputRef$curre;
+			(_promptInputRef$curre = promptInputRef.current) === null || _promptInputRef$curre === void 0 || _promptInputRef$curre.focus();
+		}
+		if (!isOpen) {
+			var _promptInputRef$curre2;
+			(_promptInputRef$curre2 = promptInputRef.current) === null || _promptInputRef$curre2 === void 0 || _promptInputRef$curre2.blur();
+		}
+	}, [isOpen, isMobile]);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: `DocSearch-Sidepanel-Container ${variant} side-${side}${isOpen ? " is-open" : ""}${isExpanded ? " is-expanded" : ""}`,
+		style: { "--sp-width": expectedWidth },
+		role: "dialog",
+		tabIndex: -1,
+		ref: sidepanelContainerRef
+	}, /* @__PURE__ */ React.createElement("aside", {
+		id: "docsearch-sidepanel",
+		className: `DocSearch-Sidepanel ${sidepanelState}`
+	}, /* @__PURE__ */ React.createElement(SidepanelHeader, {
+		sidepanelState,
+		exchanges,
+		setSidepanelState,
+		hasConversations: conversations.getAll().length > 0,
+		isStreaming,
+		onNewConversation: handleStartNewConversation,
+		onToggleExpanded: toggleIsExpanded,
+		onClose
+	}), /* @__PURE__ */ React.createElement("div", { className: "DocSearch-Sidepanel-Content" }, sidepanelState === "new-conversation" && /* @__PURE__ */ React.createElement(NewConversationScreen, {
+		suggestedQuestions,
+		translations: translations.newConversationScreen,
+		onSelectQuestion: handleSelectQuestion
+	}), sidepanelState === "conversation" && /* @__PURE__ */ React.createElement(ConversationScreen, {
+		exchanges,
+		status,
+		conversations,
+		handleFeedback: sendFeedback,
+		translations: translations.conversationScreen,
+		streamError: askAiError,
+		memoryEnabled: (_memory$enabled = memory === null || memory === void 0 ? void 0 : memory.enabled) !== null && _memory$enabled !== void 0 ? _memory$enabled : false,
+		tools,
+		onSelectPromptSuggestion: handleSend
+	}), sidepanelState === "conversation-history" && /* @__PURE__ */ React.createElement(ConversationHistoryScreen, {
+		conversations,
+		selectConversation: handleSelectConversation
+	})), /* @__PURE__ */ React.createElement(PromptForm, {
+		ref: promptInputRef,
+		exchanges,
+		isStreaming,
+		translations: translations.promptForm,
+		onSend: handleSend,
+		onStopStreaming: handleStopStreaming
+	}), /* @__PURE__ */ React.createElement("footer", { className: "DocSearch-Sidepanel-Footer" }, /* @__PURE__ */ React.createElement("span", { className: "DocSearch-Logo DocSearch-Sidepanel--powered-by" }, /* @__PURE__ */ React.createElement(AlgoliaLogo, { translations: translations.logo })))));
+}
+const Sidepanel = React.forwardRef(SidepanelInner);
+
+//#endregion
+//#region src/Sidepanel/SidepanelButton.tsx
+const _excluded$1 = [
+	"variant",
+	"keyboardShortcuts",
+	"translations"
+];
+const SidepanelButton = (_ref) => {
+	let { variant = "floating", keyboardShortcuts, translations = {} } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
+	const { buttonText = "Ask AI", buttonAriaLabel = "Ask AI" } = translations;
+	const [key, setKey] = useState(null);
+	useEffect(() => {
+		if (typeof navigator !== "undefined") isAppleDevice() ? setKey("⌘") : setKey(ACTION_KEY_DEFAULT);
+	}, []);
+	const actionKeyAltText = key === "Ctrl" ? "Control" : "Meta";
+	const isCtrlCmdIEnabled = (keyboardShortcuts === null || keyboardShortcuts === void 0 ? void 0 : keyboardShortcuts["Ctrl/Cmd+I"]) !== false;
+	const shortcut = `${actionKeyAltText}+i`;
+	return /* @__PURE__ */ React.createElement("button", _objectSpread2(_objectSpread2({
+		className: `DocSearch-SidepanelButton ${variant}`,
+		type: "button",
+		"aria-label": isCtrlCmdIEnabled ? `${buttonAriaLabel} (${shortcut})` : buttonAriaLabel,
+		"aria-keyshortcuts": isCtrlCmdIEnabled ? shortcut : void 0
+	}, variant === "floating" ? { tabIndex: -1 } : {}), props), /* @__PURE__ */ React.createElement(SparklesIcon, null), variant !== "floating" && buttonText);
+};
+
+//#endregion
+//#region src/Sidepanel.tsx
+const _excluded = [
+	"keyboardShortcuts",
+	"theme",
+	"onReady",
+	"onOpen",
+	"onClose",
+	"onSidepanelOpen",
+	"onSidepanelClose"
+];
+const _excluded2 = ["portalContainer"];
+const _excluded3 = ["button", "panel"];
+function DocSearchSidepanelComponent(_ref, ref) {
+	let { keyboardShortcuts, theme, onReady, onOpen, onClose, onSidepanelOpen, onSidepanelClose } = _ref, props = _objectWithoutProperties(_ref, _excluded);
+	return /* @__PURE__ */ React.createElement(DocSearch, {
+		keyboardShortcuts,
+		theme,
+		ref,
+		onReady,
+		onOpen,
+		onClose,
+		onSidepanelOpen,
+		onSidepanelClose
+	}, /* @__PURE__ */ React.createElement(DocSearchSidepanelComp, props));
+}
+const DocSearchSidepanel = React.forwardRef(DocSearchSidepanelComponent);
+function DocSearchSidepanelComp(_ref2) {
+	let { button: buttonProps = {}, panel: _ref3 = {} } = _ref2, { portalContainer } = _ref3, panelProps = _objectWithoutProperties(_ref3, _excluded2), rootProps = _objectWithoutProperties(_ref2, _excluded3);
+	const { docsearchState, setDocsearchState, keyboardShortcuts, registerView, initialAskAiMessage } = useDocSearch();
+	const toggleSidepanelState = React.useCallback(() => {
+		setDocsearchState(docsearchState === "sidepanel" ? "ready" : "sidepanel");
+	}, [docsearchState, setDocsearchState]);
+	const handleClose = () => {
+		setDocsearchState("ready");
+	};
+	const handleOpen = () => {
+		setDocsearchState("sidepanel");
+	};
+	const containerElement = React.useMemo(() => portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body, [portalContainer]);
+	React.useEffect(() => {
+		registerView("sidepanel");
+	}, [registerView]);
+	const ButtonComp = React.useMemo(() => /* @__PURE__ */ React.createElement(SidepanelButton, _objectSpread2({
+		keyboardShortcuts,
+		onClick: toggleSidepanelState
+	}, buttonProps)), [
+		keyboardShortcuts,
+		toggleSidepanelState,
+		buttonProps
+	]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, buttonProps.variant === "inline" ? ButtonComp : createPortal(ButtonComp, containerElement), createPortal(/* @__PURE__ */ React.createElement(Sidepanel, _objectSpread2(_objectSpread2(_objectSpread2({
+		initialMessage: initialAskAiMessage,
+		isOpen: docsearchState === "sidepanel",
+		onClose: handleClose,
+		onOpen: handleOpen
+	}, rootProps), panelProps), {}, { keyboardShortcuts })), containerElement));
+}
+
+//#endregion
+export { DocSearchSidepanel, Sidepanel, SidepanelButton };
+//# sourceMappingURL=sidepanel.js.map