@ensembleapp/client-sdk 0.0.10 → 0.0.12

package/dist/index.d.ts

@@ -5,9 +5,59 @@ import React$1, { ReactNode } from 'react';
 import z, { AnyZodObject } from 'zod';
 import { ClassValue } from 'clsx';
 
+/**
+ * Version selector for tools. This should mirror VersionSelector on server-side
+ * - 'latest': prefer draft (v0), fallback to last published
+ * - 'published': prefer last published, fallback to draft
+ * - number: specific version (1+)
+ */
+type VersionSelector = 'latest' | 'published' | number;
+/**
+ * Configuration for enriching widget data server-side by calling a tool.
+ * Uses JEXL expressions to build tool inputs from the widget payload.
+ */
+type WidgetEnrichConfig = {
+    /** Tool ID to call for enrichment */
+    toolId: string;
+    /**
+     * Tool version selector. Defaults to 'latest'.
+     * - 'latest': prefer draft, fallback to published
+     * - 'published': prefer published, fallback to draft
+     * - number: specific version (1+)
+     */
+    version?: VersionSelector;
+    /**
+     * Maps tool input names to JEXL expressions.
+     * Expressions are evaluated with $ as the payload root (auto-normalized).
+     * Use ${...} syntax for JEXL expressions, or literal values.
+     *
+     * Examples:
+     * - "${vendors|map('id')|join(',')}" → "v1,v2,v3"
+     * - "${limit}" → 10
+     * - "static value" → "static value"
+     *
+     * If omitted, the entire payload is passed as tool input.
+     */
+    inputs?: Record<string, unknown>;
+};
+/** Enrichment result containing the full tool response. TThis should mirror ToolResult on server-side. */
+type EnrichmentResult$1 = {
+    success: boolean;
+    error?: {
+        message: string;
+        code?: string;
+    };
+    data?: unknown;
+    metadata?: Record<string, unknown>;
+};
+/** Widget output shape sent to the client */
 type UIWidget = {
     widgetType: string;
-} & Record<string, unknown>;
+    /** LLM-generated data based on the widget schema specified by the client */
+    payload: unknown;
+    /** Server-injected enrichment result from tool call. This mirror ToolResult on server-side. */
+    enrichedResult?: EnrichmentResult$1;
+};
 
 type DeprecatedChatConfig = {
     /** @deprecated use agentId instead */
@@ -125,12 +175,38 @@ declare function useFeedback({ api, threadId, agentId, agentExecutionId, }: UseF
     error: Error | null;
 };
 
-interface UIWidgetDefinition<TSchema extends AnyZodObject = AnyZodObject> {
+/** Enrichment result containing the full tool response - this should mirror ToolResult
+ * OR maybe we should declare ToolResult here? */
+interface EnrichmentResult<TData = unknown> {
+    success: boolean;
+    error?: {
+        message: string;
+        code?: string;
+    };
+    data?: TData;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Props passed to widget render functions.
+ * Contains both the validated payload and optional enriched result.
+ */
+interface WidgetRenderProps<TPayload, TEnrichedData = unknown> {
+    /** The validated widget payload matching the schema */
+    payload: TPayload;
+    /** Server-injected enrichment result (only present if widget has enrich config) */
+    enrichedResult?: EnrichmentResult<TEnrichedData>;
+}
+interface UIWidgetDefinition<TSchema extends AnyZodObject = AnyZodObject, TEnrichedData = unknown> {
     widgetType: string;
     schema: TSchema;
-    render(widget: z.infer<TSchema>): ReactNode;
+    /**
+     * Optional enrichment config - if provided, server will call a tool to enrich the data.
+     * The enriched data is passed to the render function as `enrichedResult.data`.
+     */
+    enrich?: WidgetEnrichConfig;
+    render(props: WidgetRenderProps<z.infer<TSchema>, TEnrichedData>): ReactNode;
 }
-declare const createWidget: <TSchema extends AnyZodObject>({ widgetType, schema, render, }: UIWidgetDefinition<TSchema>) => UIWidgetDefinition<TSchema>;
+declare const createWidget: <TSchema extends AnyZodObject, TEnrichedData = unknown>({ widgetType, schema, enrich, render, }: UIWidgetDefinition<TSchema, TEnrichedData>) => UIWidgetDefinition<TSchema, TEnrichedData>;
 
 interface ChatWidgetStyles {
     primaryColor?: string;
@@ -277,4 +353,4 @@ declare const defaultChatWidgets: UIWidgetDefinition[];
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type ApiConfig, type ChatContentItem, type ChatMessage, ChatWidget, type ChatWidgetFeedbackOptions, type ChatWidgetInstance, type ChatWidgetConfig as ChatWidgetProps, type ChatWidgetSpeechToTextOptions, type ChatWidgetStyles, type ChatWidgetVoiceOptions, type EmbeddableChatWidgetConfig, type FeedbackRating, type FeedbackState, type MessageFeedback, type MessageSection, type PopupAnchorConfig, PopupChatWidget, type PopupChatWidgetProps, type SubmitFeedbackParams, type TagGroup, TagGroupDisplay, type TagGroupDisplayProps, type ToolCallContent, ToolCallDisplay, type ToolCallDisplayProps, type UIWidgetDefinition, type UseChatConfig, type UseFeedbackConfig, cn, createChatWidget, createWidget, defaultChatWidgets, registerChatWidgets, useChat, useFeedback };
+export { type ApiConfig, type ChatContentItem, type ChatMessage, ChatWidget, type ChatWidgetFeedbackOptions, type ChatWidgetInstance, type ChatWidgetConfig as ChatWidgetProps, type ChatWidgetSpeechToTextOptions, type ChatWidgetStyles, type ChatWidgetVoiceOptions, type EmbeddableChatWidgetConfig, type EnrichmentResult, type FeedbackRating, type FeedbackState, type MessageFeedback, type MessageSection, type PopupAnchorConfig, PopupChatWidget, type PopupChatWidgetProps, type SubmitFeedbackParams, type TagGroup, TagGroupDisplay, type TagGroupDisplayProps, type ToolCallContent, ToolCallDisplay, type ToolCallDisplayProps, type UIWidgetDefinition, type UseChatConfig, type UseFeedbackConfig, type WidgetEnrichConfig, type WidgetRenderProps, cn, createChatWidget, createWidget, defaultChatWidgets, registerChatWidgets, useChat, useFeedback };

package/dist/index.js

@@ -23666,13 +23666,14 @@ async function registerChatWidgets({
   threadId,
   widgets
 }) {
-  const widgetSchemas = widgets.map(({ widgetType, schema }) => {
+  const widgetSchemas = widgets.map(({ widgetType, schema, enrich }) => {
     schema = schema.extend({
       widgetType: zod_default.literal(widgetType)
     });
     return {
       widgetType,
-      schema: toJsonSchema(schema)
+      schema: toJsonSchema(schema),
+      enrich
     };
   });
   const { baseUrl, token, headers: customHeaders = {} } = api;
@@ -24265,7 +24266,8 @@ function MessageItemComponent({
           "]"
         ] }, key);
       }
-      return /* @__PURE__ */ jsx5("div", { className: "chat-widget__widget", children: widgetDef.render(item) }, key);
+      const widget = item;
+      return /* @__PURE__ */ jsx5("div", { className: "chat-widget__widget", children: widgetDef.render({ payload: widget.payload, enrichedResult: widget.enrichedResult }) }, key);
     }
     return null;
   };
@@ -24451,6 +24453,8 @@ function ChatWidget({
   const [isMicActive, setIsMicActive] = useState6(false);
   const [isSpeechPending, setIsSpeechPending] = useState6(false);
   const messagesEndRef = useRef2(null);
+  const scrollContainerRef = useRef2(null);
+  const isAtBottomRef = useRef2(true);
   const textareaRef = useRef2(null);
   const suppressScrollRef = useRef2(false);
   const {
@@ -24530,12 +24534,22 @@ function ChatWidget({
       }]);
     }
   }, [introMessage, messages.length, setMessages]);
+  const handleScroll = useCallback4(() => {
+    if (!scrollContainerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+    isAtBottomRef.current = distanceToBottom < 100;
+  }, []);
   useEffect4(() => {
     if (suppressScrollRef.current) {
       suppressScrollRef.current = false;
       return;
     }
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    const lastMessage = messages[messages.length - 1];
+    const isUserMessage = lastMessage?.role === "user";
+    if (isAtBottomRef.current || isUserMessage) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
   }, [messages, status]);
   useEffect4(() => {
     const timer = setTimeout(() => {
@@ -24611,36 +24625,44 @@ function ChatWidget({
       "data-chat-widget": "",
       children: [
         title && /* @__PURE__ */ jsx5("div", { className: classNames2.header, children: /* @__PURE__ */ jsx5("h3", { className: classNames2.headerTitle, children: title }) }),
-        /* @__PURE__ */ jsxs5("div", { className: classNames2.messagesContainer, children: [
-          messages.map((message, index) => {
-            const isLastMessage = index === messages.length - 1;
-            const showFeedback = !(status === "streaming" && isLastMessage);
-            const feedbackData = getFeedbackForMessage(message.id);
-            return /* @__PURE__ */ jsx5(
-              MessageItem,
-              {
-                message,
-                widgets,
-                tagExpansionState,
-                onTagToggle: handleTagToggle,
-                feedbackEnabled,
-                showFeedback,
-                existingRating: feedbackData?.rating,
-                existingComment: feedbackData?.comment,
-                feedbackSubmitting: feedbackSubmitting === message.id,
-                requireCommentForNegative: feedback?.requireCommentForNegative,
-                onFeedbackSubmit: handleFeedbackSubmit
-              },
-              message.id
-            );
-          }),
-          status === "streaming" && /* @__PURE__ */ jsx5("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx5("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs5("div", { className: classNames2.loadingDots, children: [
-            /* @__PURE__ */ jsx5("div", { className: classNames2.loadingDot }),
-            /* @__PURE__ */ jsx5("div", { className: classNames2.loadingDot, "data-delay": "1" }),
-            /* @__PURE__ */ jsx5("div", { className: classNames2.loadingDot, "data-delay": "2" })
-          ] }) }) }),
-          /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
-        ] }),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: classNames2.messagesContainer,
+            ref: scrollContainerRef,
+            onScroll: handleScroll,
+            children: [
+              messages.map((message, index) => {
+                const isLastMessage = index === messages.length - 1;
+                const showFeedback = !(status === "streaming" && isLastMessage);
+                const feedbackData = getFeedbackForMessage(message.id);
+                return /* @__PURE__ */ jsx5(
+                  MessageItem,
+                  {
+                    message,
+                    widgets,
+                    tagExpansionState,
+                    onTagToggle: handleTagToggle,
+                    feedbackEnabled,
+                    showFeedback,
+                    existingRating: feedbackData?.rating,
+                    existingComment: feedbackData?.comment,
+                    feedbackSubmitting: feedbackSubmitting === message.id,
+                    requireCommentForNegative: feedback?.requireCommentForNegative,
+                    onFeedbackSubmit: handleFeedbackSubmit
+                  },
+                  message.id
+                );
+              }),
+              status === "streaming" && /* @__PURE__ */ jsx5("div", { className: classNames2.loadingContainer, children: /* @__PURE__ */ jsx5("div", { className: classNames2.loadingBubble, children: /* @__PURE__ */ jsxs5("div", { className: classNames2.loadingDots, children: [
+                /* @__PURE__ */ jsx5("div", { className: classNames2.loadingDot }),
+                /* @__PURE__ */ jsx5("div", { className: classNames2.loadingDot, "data-delay": "1" }),
+                /* @__PURE__ */ jsx5("div", { className: classNames2.loadingDot, "data-delay": "2" })
+              ] }) }) }),
+              /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx5("div", { className: classNames2.inputContainer, children: /* @__PURE__ */ jsxs5("form", { onSubmit: handleSubmit, className: classNames2.inputForm, children: [
           /* @__PURE__ */ jsx5(
             "textarea",
@@ -24841,11 +24863,13 @@ var createChatWidget = (target, props) => {
 var createWidget = ({
   widgetType,
   schema,
+  enrich,
   render
 }) => ({
   widgetType,
   schema,
-  render: (widget) => render(widget)
+  enrich,
+  render: (props) => render(props)
 });
 
 // lib/widgets/default-widgets.tsx
@@ -24858,7 +24882,7 @@ var defaultChatWidgets = [
       profileUri: zod_default.string().optional(),
       details: zod_default.record(zod_default.any()).optional()
     }).describe("showing a person card with name, photo and additional details"),
-    render: (widget) => /* @__PURE__ */ jsx8(
+    render: ({ payload }) => /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -24872,11 +24896,11 @@ var defaultChatWidgets = [
           boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
         },
         children: /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.75rem" }, children: [
-          widget.profileUri && /* @__PURE__ */ jsx8(
+          payload.profileUri && /* @__PURE__ */ jsx8(
             "img",
             {
-              src: widget.profileUri,
-              alt: widget.name,
+              src: payload.profileUri,
+              alt: payload.name,
               style: {
                 width: "3rem",
                 height: "3rem",
@@ -24888,8 +24912,8 @@ var defaultChatWidgets = [
             }
           ),
           /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx8("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: widget.name }),
-            widget.details ? /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(widget.details).map(([key, value]) => /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
+            /* @__PURE__ */ jsx8("div", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827", marginBottom: "0.25rem" }, children: payload.name }),
+            payload.details ? /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: Object.entries(payload.details).map(([key, value]) => /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: "0.5rem", fontSize: "0.875rem" }, children: [
               /* @__PURE__ */ jsxs7("span", { style: { color: "#6b7280", fontWeight: 500, minWidth: "fit-content" }, children: [
                 key,
                 ":"
@@ -24907,10 +24931,10 @@ var defaultChatWidgets = [
       uri: zod_default.string().url(),
       text: zod_default.string().optional()
     }).describe("rendering a clickable link"),
-    render: (widget) => /* @__PURE__ */ jsx8(
+    render: ({ payload }) => /* @__PURE__ */ jsx8(
       "a",
       {
-        href: widget.uri,
+        href: payload.uri,
         target: "_blank",
         rel: "noreferrer",
         style: {
@@ -24936,9 +24960,68 @@ var defaultChatWidgets = [
           e.currentTarget.style.borderColor = "#d1d5db";
           e.currentTarget.style.color = "#3b82f6";
         },
-        children: widget.text || widget.uri
+        children: payload.text || payload.uri
       }
     )
+  }),
+  createWidget({
+    widgetType: "vendor-cards",
+    schema: zod_default.object({
+      vendors: zod_default.array(zod_default.object({
+        id: zod_default.string(),
+        rank: zod_default.number().describe("ranking position of the vendor from 1 to N"),
+        reason: zod_default.string().describe("reason for the vendor ranking")
+      }))
+    }).describe("displaying a list of vendor cards with rankings and reasons"),
+    enrich: {
+      toolId: "LEsUueB52QpakvN1n5HG",
+      inputs: {
+        ids: "${vendors|map('id')|join(',')}"
+      }
+    },
+    render: ({ payload, enrichedResult }) => {
+      const vendorData = enrichedResult?.data ?? {};
+      return /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: payload.vendors.map((v) => {
+        const data = vendorData[v.id];
+        return /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.5rem",
+              padding: "1rem",
+              background: "#ffffff",
+              border: "1px solid #e5e7eb",
+              borderRadius: "0.5rem",
+              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs7("span", { style: { fontWeight: 600, fontSize: "1rem", color: "#111827" }, children: [
+                  "#",
+                  v.rank,
+                  " ",
+                  data?.name ?? `Vendor ${v.id}`
+                ] }),
+                data?.rating && /* @__PURE__ */ jsxs7("span", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: [
+                  "\u2B50 ",
+                  data.rating.toFixed(1)
+                ] })
+              ] }),
+              data?.description && /* @__PURE__ */ jsx8("div", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: data.description }),
+              /* @__PURE__ */ jsxs7("div", { style: { fontSize: "0.875rem", color: "#374151" }, children: [
+                /* @__PURE__ */ jsx8("strong", { children: "Why:" }),
+                " ",
+                v.reason
+              ] }),
+              data?.address && /* @__PURE__ */ jsx8("div", { style: { fontSize: "0.75rem", color: "#9ca3af" }, children: data.address })
+            ]
+          },
+          v.id
+        );
+      }) });
+    }
   })
 ];
 export {