@inkeep/agents-ui 0.15.9 → 0.15.11

package/dist/styled/inkeep.css.js

@@ -1708,6 +1708,9 @@ video {
 .lowercase {
   text-transform: lowercase;
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .leading-4 {
   line-height: 1rem;
 }
@@ -2175,6 +2178,17 @@ slot {
   position: absolute;
 }
 
+.before\\:inset-x-0::before {
+  content: var(--tw-content);
+  left: 0px;
+  right: 0px;
+}
+
+.before\\:-top-px::before {
+  content: var(--tw-content);
+  top: -1px;
+}
+
 .before\\:left-0::before {
   content: var(--tw-content);
   left: 0px;
@@ -2185,6 +2199,11 @@ slot {
   top: 0px;
 }
 
+.before\\:z-10::before {
+  content: var(--tw-content);
+  z-index: 10;
+}
+
 .before\\:z-hide::before {
   content: var(--tw-content);
   z-index: var(--ikp-z-index-hide);
@@ -2246,6 +2265,11 @@ slot {
   background-repeat: no-repeat;
 }
 
+.before\\:content-\\[\\"\\"\\]::before {
+  --tw-content: "";
+  content: var(--tw-content);
+}
+
 .before\\:\\[background-position\\:0_0\\]::before {
   content: var(--tw-content);
   background-position: 0 0;
@@ -2256,6 +2280,11 @@ slot {
   background-size: cover;
 }
 
+.after\\:pointer-events-none::after {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
 .after\\:invisible::after {
   content: var(--tw-content);
   visibility: hidden;
@@ -2266,6 +2295,12 @@ slot {
   position: absolute;
 }
 
+.after\\:inset-x-0::after {
+  content: var(--tw-content);
+  left: 0px;
+  right: 0px;
+}
+
 .after\\:bottom-0::after {
   content: var(--tw-content);
   bottom: 0px;
@@ -2296,6 +2331,11 @@ slot {
   top: 100%;
 }
 
+.after\\:z-10::after {
+  content: var(--tw-content);
+  z-index: 10;
+}
+
 .after\\:z-base::after {
   content: var(--tw-content);
   z-index: var(--ikp-z-index-base);
@@ -2578,6 +2618,10 @@ slot {
   max-height: 0px;
 }
 
+.data-\\[expanded\\=true\\]\\:max-h-48[data-expanded="true"] {
+  max-height: 12rem;
+}
+
 .data-\\[composite\\]\\:w-full[data-composite] {
   width: 100%;
 }
@@ -2752,6 +2796,10 @@ slot {
   justify-content: flex-end;
 }
 
+.data-\\[expanded\\=true\\]\\:overflow-y-auto[data-expanded="true"] {
+  overflow-y: auto;
+}
+
 .data-\\[role\\=user\\]\\:whitespace-pre-wrap[data-role="user"] {
   white-space: pre-wrap;
 }
@@ -2816,6 +2864,10 @@ slot {
   padding-bottom: 0.5rem;
 }
 
+.data-\\[expanded\\=true\\]\\:pb-3[data-expanded="true"] {
+  padding-bottom: 0.75rem;
+}
+
 .data-\\[has-content\\]\\:pb-2[data-has-content] {
   padding-bottom: 0.5rem;
 }
@@ -2943,6 +2995,11 @@ slot {
   --start-color: var(--ikp-color-inkeep-expanded-primary-50);
 }
 
+.data-\\[expanded\\=false\\]\\:before\\:opacity-0[data-expanded="false"]::before {
+  content: var(--tw-content);
+  opacity: 0;
+}
+
 .data-\\[required\\]\\:after\\:absolute[data-required]::after {
   content: var(--tw-content);
   position: absolute;
@@ -3005,6 +3062,11 @@ slot {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.data-\\[expanded\\=false\\]\\:after\\:opacity-0[data-expanded="false"]::after {
+  content: var(--tw-content);
+  opacity: 0;
+}
+
 .data-\\[required\\]\\:after\\:\\[content\\:\\"\\*\\"\\][data-required]::after {
   content: "*";
 }
@@ -3027,6 +3089,11 @@ slot {
   background-image: conic-gradient(transparent,var(--ikp-color-inkeep-expanded-primary-600),transparent 30%);
 }
 
+.group[data-expanded="true"] .group-data-\\[expanded\\=true\\]\\:rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group[data-expanded="true"] .group-data-\\[expanded\\=true\\]\\:rotate-90 {
   --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/dist/types/config/ai.d.ts

@@ -22,27 +22,27 @@ export interface InkeepAIChatSettings {
     /**
      * The placeholder text to display in the chat input field when empty.
      * Use this to provide guidance on what kind of questions users can ask.
-     * @example "Ask me anything about our API documentation..."
+     * "Ask me anything about our API documentation..."
      */
     placeholder?: string;
     /**
      * A welcome message shown at the start of a new chat session.
      * Supports markdown formatting for rich text styling.
      * Use this to introduce the AI assistant's capabilities and set expectations.
-     * @example "👋 Hi! I'm here to help you with technical questions about our API..."
+     * "👋 Hi! I'm here to help you with technical questions about our API..."
      */
     introMessage?: string;
     /**
      * The name of the product/service/topic that the chat assistant specializes in.
      * This helps contextualize the chat experience for users.
      * If not provided, defaults to the organization name from base settings.
-     * @example "MongoDB Atlas" or "React Router"
+     * "MongoDB Atlas" or "React Router"
      */
     chatSubjectName?: string;
     /**
      * The display name for the AI assistant in the chat interface.
      * Choose a name that reflects the assistant's role and your brand.
-     * @example "Atlas Assistant" or "DevBot"
+     * "Atlas Assistant" or "DevBot"
      */
     aiAssistantName?: string;
     /**
@@ -51,8 +51,6 @@ export interface InkeepAIChatSettings {
      * Supports common image formats (PNG, JPG, SVG).
      *
      * You can pass a string or an object to configure for different color modes.
-     *
-     * @example
      * {
      *   light: 'https://example.com/avatar-light.png',
      *   dark: 'https://example.com/avatar-dark.png',
@@ -77,13 +75,13 @@ export interface InkeepAIChatSettings {
     /**
      * Custom heading text for the example questions section.
      * Use this to better describe your suggested queries.
-     * @example "Common Questions" or "Try asking about..."
+     * "Common Questions" or "Try asking about..."
      */
     exampleQuestionsLabel?: string;
     /**
      * A list of pre-written questions users can click to quickly start a conversation.
      * These should reflect common use cases and help users understand the AI assistant's capabilities.
-     * @example ["How do I reset my password?", "What are the API rate limits?"] or [{ value: "How do I reset my password?", label: "How do I reset my password?" }, { value: "What are the API rate limits?", label: "What are the API rate limits?" }]
+     * ["How do I reset my password?", "What are the API rate limits?"] or [{ value: "How do I reset my password?", label: "How do I reset my password?" }, { value: "What are the API rate limits?", label: "What are the API rate limits?" }]
      */
     exampleQuestions?: string[] | {
         value: string;
@@ -102,7 +100,7 @@ export interface InkeepAIChatSettings {
     /**
      * The base URL path used when generating shareable chat links.
      * Should match your application's routing structure.
-     * @example "/shared-chats/" or "/support/conversations/"
+     * "/shared-chats/" or "/support/conversations/"
      */
     shareChatUrlBasePath?: string;
     /**
@@ -186,7 +184,7 @@ export interface AIChatDisclaimerSettings {
     /**
      * The main text content of the disclaimer message.
      * Should clearly communicate important information about AI usage or limitations.
-     * @example "AI responses are generated automatically and may require verification."
+     * "AI responses are generated automatically and may require verification."
      */
     label?: string;
     /**
@@ -229,27 +227,27 @@ export interface AIChatFunctions {
 export interface AIChatToolbarButtonLabels {
     /**
      * Text shown on the button that clears the chat history.
-     * @example "Clear Chat" or "Start Over"
+     * "Clear Chat" or "Start Over"
      */
     clear?: string;
     /**
      * Text shown on the button that generates a shareable chat link.
-     * @example "Share Chat" or "Get Link"
+     * "Share Chat" or "Get Link"
      */
     share?: string;
     /**
      * Text shown on the button that opens the help options menu.
-     * @example "Get Help" or "Support Options"
+     * "Get Help" or "Support Options"
      */
     getHelp?: string;
     /**
      * Text shown on the button that stops the AI from generating a response.
-     * @example "Stop" or "Cancel Response"
+     * "Stop" or "Cancel Response"
      */
     stop?: string;
     /**
      * Text shown on the button that copies the chat transcript.
-     * @example "Copy Chat" or "Copy Transcript"
+     * "Copy Chat" or "Copy Transcript"
      */
     copyChat?: string;
 }

package/dist/types/config/base.d.ts

@@ -142,8 +142,6 @@ export interface UserTheme extends Partial<IkpTheme> {
     /**
      * The syntax highlighter theme configuration for code blocks.
      * Allows setting different themes for light and dark modes.
-     *
-     * @example
      * ```ts
      * syntaxHighlighter: {
      *   lightTheme: themes.github,
@@ -155,8 +153,6 @@ export interface UserTheme extends Partial<IkpTheme> {
     /**
      * The primary colors used to generate the color scheme.
      * These colors will be used to create variations for different UI states.
-     *
-     * @example
      * ```ts
      * primaryColors: {
      *   primary: '#26D6FF',
@@ -176,8 +172,6 @@ export interface UserTheme extends Partial<IkpTheme> {
      * Custom styles to be injected into the widget.
      * Supports both inline styles and external stylesheets/resources.
      * Styles are uniquely identified by their key to prevent duplicates.
-     *
-     * @example
      * ```ts
      * styles: [
      *   // External stylesheet or font
@@ -213,8 +207,6 @@ export interface Style {
     /**
      * A unique identifier for the style.
      * This is used to prevent duplicate styles and allow for style updates.
-     *
-     * @example
      * key: 'custom-button-styles'
      */
     key?: string;
@@ -222,8 +214,6 @@ export interface Style {
      * The type of style to apply.
      * - 'link': Adds a <link> tag to load external resources like fonts or stylesheets
      * - 'style': Injects CSS directly into a <style> tag
-     *
-     * @example
      * type: 'link' // For loading external resources
      * type: 'style' // For inline CSS
      */
@@ -252,8 +242,6 @@ export interface ColorModeConfig extends Omit<ColorModeProviderProps, 'children'
      *
      * This allows the widget to automatically match its color mode (light/dark) with your application's theme.
      * The widget will observe changes to specified attributes on a target element and update its appearance accordingly.
-     *
-     * @example
      * ```ts
      * colorMode: {
      *   sync: {
@@ -277,8 +265,6 @@ export interface SyncColorMode {
      * This element's attributes will be monitored for changes to determine the color mode.
      *
      * Common use cases include watching the document root or a specific app container.
-     *
-     * @example
      * ```ts
      * // Watch the document root element
      * target: document.documentElement
@@ -299,8 +285,6 @@ export interface SyncColorMode {
      * - data-theme: Custom theme attribute
      * - color-scheme: Standard CSS color scheme
      * - class: Class-based theming
-     *
-     * @example
      * ```ts
      * // Watch data-theme attribute
      * attributes: ['data-theme']
@@ -323,8 +307,6 @@ export interface SyncColorMode {
   
      * @param attributes - Object containing the current values of monitored attributes
      * @returns True if dark mode is detected, false otherwise
-     *
-     * @example
      * ```ts
      * // Check data-theme attribute
      * isDarkMode: (attributes) => attributes['data-theme'] === 'dark'
@@ -344,8 +326,6 @@ export interface SyncColorMode {
      *
   
      * @param colorMode - The new color mode value ('light' | 'dark')
-     *
-     * @example
      * ```ts
      * onChange: (colorMode) => {
      *   console.log(`Color mode changed to: ${colorMode}`);

package/dist/types/config/components.d.ts

@@ -1,3 +1,4 @@
+import { ToolUIPart } from 'ai';
 import { Message } from '../message';
 export type ComponentsConfig<A extends Record<string, unknown>> = {
     [K in keyof A]: (props: A[K], target: HTMLElement, context: null) => void | React.ReactNode;
@@ -7,4 +8,9 @@ export type ComponentsConfig<A extends Record<string, unknown>> = {
         renderComponent: (name: string, props: Record<string, unknown>) => React.ReactNode;
         renderMarkdown: (text: string) => React.ReactNode;
     }, target: HTMLElement, context: null): void | React.ReactNode;
+    IkpTool?(props: {
+        tool: ToolUIPart;
+        approve: (approved?: boolean) => Promise<void>;
+        renderMarkdown: (text: string) => React.ReactNode;
+    }, target: HTMLElement, context: null): void | React.ReactNode;
 };

package/dist/types/config/search.d.ts

@@ -51,8 +51,6 @@ export interface InkeepSearchSettings {
      * - Omit 'All' from tabs array to hide the All tab
      * - Empty tabs array will show all results without tab UI
      * - Tabs only appear when they have results, unless isAlwaysVisible is set
-     *
-     * @example
      * ```ts
      * // Basic tabs
      * tabs: ['Publications', 'GitHub']

package/dist/types/config/settings/actions.d.ts

@@ -28,18 +28,84 @@ export interface InvokeMessageCallbackAction {
     callback: (args: InvokeMessageCallbackActionArgs) => void;
     shouldCloseModal?: boolean;
 }
-type ChatAction = InvokeCallbackAction | OpenFormAction | OpenUrlAction;
-type MessageChatAction = InvokeMessageCallbackAction | OpenFormAction | OpenUrlAction;
+type Expand<T> = T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never;
+type ExpandUnion<T> = T extends any ? Expand<T> : never;
+type ChatAction = ExpandUnion<InvokeCallbackAction | OpenFormAction | OpenUrlAction>;
+type MessageChatAction = ExpandUnion<InvokeMessageCallbackAction | OpenFormAction | OpenUrlAction>;
 export type ChatActionType = ChatAction['type'];
 export interface GetHelpOption {
     icon?: InkeepCustomIcon;
     name: string;
     isPinnedToToolbar?: boolean;
+    /**
+     * Action to be performed when the option is clicked.
+     *
+     * ```ts
+     * action: {
+     *   type: 'open_form',
+     *   formSettings: {
+     *     title: 'Open Form',
+     *     description: 'Open a form',
+     *   },
+     * }
+     * ```
+     * ```ts
+     * action: {
+     *   type: 'open_link',
+     *   url: 'https://example.com',
+     * }
+     * ```
+     * ```ts
+     * action: {
+     *   type: 'invoke_callback',
+     *   callback: (args: InvokeCallbackArgs) => {
+     *     console.log(args)
+     *   },
+     * }
+     * ```
+     */
     action: ChatAction;
 }
 export interface CustomMessageAction {
     label?: string;
+    /**
+     * Icon to be displayed next to the label.
+     *
+     * ```ts
+     * icon: { builtIn: 'FaEnvelope' },
+     * icon: { custom: 'https://example.com/icon.svg' },
+     * ```
+     */
     icon?: InkeepCustomIcon;
+    /**
+     * Action to be performed when the option is clicked.
+     *
+     * ```ts
+     * action: {
+     *   type: 'open_form',
+     *   formSettings: {
+     *     title: 'Open Form',
+     *     description: 'Open a form',
+     *   },
+     * },
+     * ```
+     * ```ts
+     * action: {
+     *   type: 'invoke_message_callback',
+     *   callback: (args: InvokeMessageCallbackActionArgs) => {
+     *     console.log(args)
+     *   },
+     * }
+     * ```
+     * ```ts
+     * action: {
+     *   type: 'open_link',
+     *   url: 'https://example.com',
+     * }
+     * ```
+     */
     action: MessageChatAction;
 }
 export type IkpChatAction = GetHelpOption | CustomMessageAction;

package/dist/types/sources.d.ts

@@ -51,8 +51,6 @@ export interface TransformedSource {
     description?: string;
     /**
      * Breadcrumbs for the source.
-     *
-     * @example
      * ```ts
      * breadcrumbs: ['Subpath', 'Page']
      * ```
@@ -60,14 +58,12 @@ export interface TransformedSource {
     breadcrumbs?: string[];
     /**
      * Tabs where this source shows up. (Only for searchResultsItem)
-     *
-     * @example
      * ```ts
      * tabs: ['Docs']
      * tabs: ['Docs', 'API']
      * ```
      * You can also specify different breadcrumbs for specific tab.
-     * @example
+     *
      * ```ts
      * tabs: ['Docs', ['API', { breadcrumbs: ['Guides', 'API'] }]]
      * ```
@@ -75,8 +71,6 @@ export interface TransformedSource {
     tabs?: (SourceTab | string)[];
     /**
      * Icon of the source.
-     *
-     * @example
      * ```ts
      * icon: { builtIn: 'LuBookOpen' }
      * icon: { custom: 'https://example.com/icon.svg' }
@@ -89,8 +83,6 @@ export interface TransformedSource {
     shouldOpenInNewTab?: boolean;
     /**
      * Search query params to append to the URL.
-     *
-     * @example
      * If you want to know if the source is from chat or search, you can append the source type to the URL.
      * ```ts
      * appendToUrl: { from: 'chatSourceItem' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-ui",
-  "version": "0.15.9",
+  "version": "0.15.11",
   "description": "",
   "homepage": "",
   "repository": {