@ensembleapp/client-sdk 0.0.10 → 0.0.11

package/dist/index.d.ts

@@ -1,14 +1,12 @@
 import * as ai from 'ai';
 import { UIMessage } from 'ai';
+import { UIWidget, WidgetEnrichConfig } from '@repo/agent-sdk/schemas';
+export { WidgetEnrichConfig } from '@repo/agent-sdk/schemas';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ReactNode } from 'react';
 import z, { AnyZodObject } from 'zod';
 import { ClassValue } from 'clsx';
 
-type UIWidget = {
-    widgetType: string;
-} & Record<string, unknown>;
-
 type DeprecatedChatConfig = {
     /** @deprecated use agentId instead */
     agentExecutionId?: string;
@@ -125,12 +123,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 +301,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 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 {