363 lines
9.7 KiB
TypeScript
363 lines
9.7 KiB
TypeScript
interface SidepanelShortcuts {
|
|
/**
|
|
* Enable/disable the Ctrl/Cmd+I shortcut to toggle the DocSearch sidepanel.
|
|
*
|
|
* @default true
|
|
*/
|
|
'Ctrl/Cmd+I'?: boolean;
|
|
}
|
|
|
|
type DocSearchTheme = 'dark' | 'light';
|
|
type InitialAskAiMessage = {
|
|
query: string;
|
|
messageId?: string;
|
|
suggestedQuestionId?: string;
|
|
};
|
|
/**
|
|
* Lifecycle callbacks for DocSearch.
|
|
*/
|
|
interface DocSearchCallbacks {
|
|
/** Called once DocSearch is mounted and ready for interaction. */
|
|
onReady?: () => void;
|
|
/** Called when the modal opens. */
|
|
onOpen?: () => void;
|
|
/** Called when the modal closes. */
|
|
onClose?: () => void;
|
|
/** Called when the sidepanel opens. */
|
|
onSidepanelOpen?: () => void;
|
|
/** Called when the sidepanel closes. */
|
|
onSidepanelClose?: () => void;
|
|
}
|
|
|
|
type AlgoliaLogoTranslations = Partial<{
|
|
poweredByText: string;
|
|
}>;
|
|
|
|
type ToolCallTranslations = {
|
|
/**
|
|
* Text shown while assistant is preparing tool call.
|
|
*/
|
|
preToolCallText: string;
|
|
/**
|
|
* Text shown while assistant is performing search tool call.
|
|
*/
|
|
searchingText: string;
|
|
/**
|
|
* Text shown while assistant is finished performing tool call.
|
|
*/
|
|
toolCallResultText: string;
|
|
};
|
|
|
|
type ConversationScreenTranslations = Partial<ToolCallTranslations & {
|
|
/**
|
|
* Text shown as an LLM disclaimer.
|
|
*/
|
|
conversationDisclaimer: string;
|
|
/**
|
|
* Text shown while assistant is reasoning.
|
|
*/
|
|
reasoningText: string;
|
|
/**
|
|
* Text show while assistant is thinking.
|
|
*/
|
|
thinkingText: string;
|
|
/**
|
|
* Text shown describing related sources.
|
|
*/
|
|
relatedSourcesText: string;
|
|
/**
|
|
* Message that's shown when user has stopped the streaming of a message.
|
|
*/
|
|
stoppedStreamingText: string;
|
|
/**
|
|
* Text shown for copy button on code snippets.
|
|
**/
|
|
copyButtonText: string;
|
|
/**
|
|
* Message shown after clicking copy.
|
|
**/
|
|
copyButtonCopiedText: string;
|
|
/**
|
|
* Title for thumbs up feedback icon.
|
|
**/
|
|
likeButtonTitle: string;
|
|
/**
|
|
* Title for thumbs down feedback icon.
|
|
**/
|
|
dislikeButtonTitle: string;
|
|
/**
|
|
* Message displayed after feedback action.
|
|
**/
|
|
thanksForFeedbackText: string;
|
|
/**
|
|
* Error title shown if there is an error while chatting.
|
|
*/
|
|
errorTitleText: string;
|
|
/**
|
|
* Button label to start a new conversation after a blocking Ask AI error.
|
|
*/
|
|
startNewConversationButtonText: string;
|
|
}>;
|
|
|
|
type NewConversationScreenTranslations = Partial<{
|
|
/**
|
|
* Title to be shown on the new conversation/starting screen.
|
|
**/
|
|
titleText: string;
|
|
/**
|
|
* Introduction text displayed on the new conversation/starting screen.
|
|
**/
|
|
introductionText: string;
|
|
}>;
|
|
|
|
type PromptFormTranslations = Partial<{
|
|
/**
|
|
* Initial placeholder for the prompt input.
|
|
**/
|
|
promptPlaceholderText: string;
|
|
/**
|
|
* Placeholder text for wile a conversation is streaming.
|
|
**/
|
|
promptAnsweringText: string;
|
|
/**
|
|
* Placeholder text for after a question has already been asked.
|
|
**/
|
|
promptAskAnotherQuestionText: string;
|
|
/**
|
|
* Disclaimer text displayed beneath the prompt form.
|
|
**/
|
|
promptDisclaimerText: string;
|
|
/**
|
|
* Visually hidden label text (`aria-labelledby`); usually keyboard hints for the textarea.
|
|
**/
|
|
promptLabelText: string;
|
|
/**
|
|
* Accessible name for the textarea (`aria-label`).
|
|
**/
|
|
promptAriaLabelText: string;
|
|
/**
|
|
* Placeholder when the conversation hit the thread depth limit (AI-217).
|
|
**/
|
|
threadDepthErrorPlaceholder: string;
|
|
/**
|
|
* Button label in the blocking-error banner to start a new conversation.
|
|
**/
|
|
startNewConversationButtonText: string;
|
|
/**
|
|
* Trailing sentence fragment after the button in the thread-depth banner (e.g. "to continue.").
|
|
**/
|
|
threadDepthBannerContinueText: string;
|
|
}>;
|
|
|
|
type PanelVariant = 'floating' | 'inline';
|
|
type PanelSide = 'left' | 'right';
|
|
|
|
type HeaderTranslations = Partial<{
|
|
/**
|
|
* The main title text shown on the header.
|
|
**/
|
|
title: string;
|
|
/**
|
|
* The title text shown on the conversation history screen.
|
|
**/
|
|
conversationHistoryTitle: string;
|
|
/**
|
|
* The text shown on the start a conversation button.
|
|
**/
|
|
newConversationText: string;
|
|
/**
|
|
* The text shown on the view conversation history button.
|
|
**/
|
|
viewConversationHistoryText: string;
|
|
}>;
|
|
type SidepanelTranslations = Partial<{
|
|
/**
|
|
* Translation texts for the Sidepanel header.
|
|
**/
|
|
header: HeaderTranslations;
|
|
/**
|
|
* Translation texts for the prompt form.
|
|
**/
|
|
promptForm: PromptFormTranslations;
|
|
/**
|
|
* Translation texts for the conversation screen.
|
|
**/
|
|
conversationScreen: ConversationScreenTranslations;
|
|
/**
|
|
* Translation texts for the new conversation/starting screen.
|
|
**/
|
|
newConversationScreen: NewConversationScreenTranslations;
|
|
/**
|
|
* Translation text for the Algolia logo.
|
|
**/
|
|
logo: AlgoliaLogoTranslations;
|
|
}>;
|
|
type SidepanelProps$1 = {
|
|
/**
|
|
* Variant of the Sidepanel positioning.
|
|
*
|
|
* - `inline` pushes page content when opened
|
|
* - `floating` is positioned above all other content on page.
|
|
*
|
|
* @default 'floating'
|
|
*/
|
|
variant?: PanelVariant;
|
|
/**
|
|
* Side of the page which the panel will originate from.
|
|
*
|
|
* @default 'right'
|
|
*/
|
|
side?: PanelSide;
|
|
/**
|
|
* The selector of the element to push when Sidepanel opens with `inline` variant.
|
|
*
|
|
* @default `'#root, main, .app, body'`
|
|
*/
|
|
pushSelector?: string;
|
|
/**
|
|
* Width of the Sidepanel (px or any CSS width).
|
|
*
|
|
* @default `360px`
|
|
**/
|
|
width?: number | string;
|
|
/**
|
|
* Width when expanded (px or any CSS width).
|
|
*
|
|
* @default `580px`
|
|
**/
|
|
expandedWidth?: number | string;
|
|
/**
|
|
* The container element where the panel should be portaled to.
|
|
*
|
|
* @default `document.body`
|
|
*/
|
|
portalContainer?: DocumentFragment | Element | null;
|
|
/**
|
|
* Enables displaying suggested questions on new conversation screen.
|
|
*
|
|
* @default false
|
|
*/
|
|
suggestedQuestions?: boolean;
|
|
/**
|
|
* Translations specific to the Sidepanel panel.
|
|
**/
|
|
translations?: SidepanelTranslations;
|
|
/**
|
|
* Configuration for keyboard shortcuts. Allows enabling/disabling specific shortcuts.
|
|
*
|
|
* @default `{ 'Ctrl/Cmd+I': true }`
|
|
*/
|
|
keyboardShortcuts?: SidepanelShortcuts;
|
|
useStagingEnv?: boolean;
|
|
};
|
|
|
|
type SidepanelButtonTranslations = Partial<{
|
|
/**
|
|
* Text to be displayed when button has variant: `inline`.
|
|
*
|
|
* @default 'Ask AI'
|
|
**/
|
|
buttonText: string;
|
|
/**
|
|
* Aria label text for the button.
|
|
*
|
|
* @default 'Ask AI'
|
|
**/
|
|
buttonAriaLabel: string;
|
|
}>;
|
|
type ButtonVariant = 'floating' | 'inline';
|
|
type SidepanelButtonProps = {
|
|
/**
|
|
* Variant of the button positioning and styling.
|
|
*
|
|
* - `inline` displays the button inline where rendered, with extra text
|
|
* - `floating` displays the button floating in bottom right of screen with just icon.
|
|
*
|
|
* @default 'floating'
|
|
**/
|
|
variant?: ButtonVariant;
|
|
/**
|
|
* Translations specific to the Sidepanel button.
|
|
**/
|
|
translations?: SidepanelButtonTranslations;
|
|
/**
|
|
* Configuration for keyboard shortcuts. Allows enabling/disabling specific shortcuts.
|
|
*
|
|
* @default `{ 'Ctrl/Cmd+I': true }`
|
|
*/
|
|
keyboardShortcuts?: SidepanelShortcuts;
|
|
};
|
|
type DocSearchSidepanelProps = DocSearchCallbacks & {
|
|
/**
|
|
* The assistant ID to use for the ask AI feature.
|
|
*/
|
|
assistantId: string;
|
|
/**
|
|
* Public api key with search permissions for the index.
|
|
*/
|
|
apiKey: string;
|
|
/**
|
|
* Algolia application id used by the search client.
|
|
*/
|
|
appId: string;
|
|
/**
|
|
* The index name to use for the ask AI feature. Your assistant will search this index for relevant documents.
|
|
*/
|
|
indexName: string;
|
|
/**
|
|
* Configuration for keyboard shortcuts. Allows enabling/disabling specific shortcuts.
|
|
*
|
|
* @default `{ 'Ctrl/Cmd+I': true }`
|
|
*/
|
|
keyboardShortcuts?: SidepanelShortcuts;
|
|
/**
|
|
* Theme overrides applied to the Sidepanel button and panel.
|
|
*
|
|
* @default 'light'
|
|
*/
|
|
theme?: DocSearchTheme;
|
|
/**
|
|
* Props specific to the Sidepanel button.
|
|
*/
|
|
button?: Omit<SidepanelButtonProps, 'keyboardShortcuts'>;
|
|
/**
|
|
* Props specific to the Sidepanel panel.
|
|
*/
|
|
panel?: Omit<SidepanelProps$1, 'keyboardShortcuts'>;
|
|
};
|
|
|
|
/**
|
|
* Instance returned by sidepanel() for programmatic control.
|
|
*/
|
|
interface SidepanelInstance {
|
|
/** Returns true once the component is mounted and ready. */
|
|
readonly isReady: boolean;
|
|
/** Returns true if the sidepanel is currently open. */
|
|
readonly isOpen: boolean;
|
|
/** Opens the sidepanel, optionally with an initial message. */
|
|
open(initialMessage?: InitialAskAiMessage): void;
|
|
/** Closes the sidepanel. */
|
|
close(): void;
|
|
/** Unmounts the Sidepanel component and cleans up. */
|
|
destroy(): void;
|
|
}
|
|
/**
|
|
* Lifecycle callbacks for the Sidepanel instance.
|
|
*/
|
|
interface SidepanelCallbacks {
|
|
/** Called once Sidepanel is mounted and ready for interaction. */
|
|
onReady?: () => void;
|
|
/** Called when the sidepanel opens. */
|
|
onOpen?: () => void;
|
|
/** Called when the sidepanel closes. */
|
|
onClose?: () => void;
|
|
}
|
|
type SidepanelProps = DocSearchSidepanelProps & SidepanelCallbacks & {
|
|
container: HTMLElement | string;
|
|
environment?: typeof window;
|
|
};
|
|
declare function sidepanel(props: SidepanelProps): SidepanelInstance;
|
|
|
|
export { sidepanel as default };
|
|
export type { SidepanelCallbacks, SidepanelInstance, SidepanelProps };
|