@usecrow/ui 0.1.55 → 0.1.57

package/dist/index.d.cts

@@ -384,8 +384,18 @@ interface CrowWidgetProps {
      * exists for its name, that component is rendered inline in the chat.
      */
     toolRenderers?: ToolRenderers;
+    /**
+     * ISO 639-1 language code (e.g., "es", "fr", "ja"). When set, the AI
+     * responds in that language and the welcome message is translated.
+     */
+    language?: string;
+    /**
+     * Custom CSS to inject into the widget's Shadow DOM.
+     * Appended after default styles, allowing overrides.
+     */
+    customCss?: string;
 }
-declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, language, customCss, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -462,8 +472,13 @@ interface CrowCopilotProps {
      * ```
      */
     context?: Record<string, unknown>;
+    /**
+     * ISO 639-1 language code (e.g., "es", "fr", "ja"). When set, the AI
+     * responds in that language and the welcome message is translated.
+     */
+    language?: string;
 }
-declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, language, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -663,6 +678,8 @@ interface UseChatOptions {
     toolConsentSettings?: Record<string, {
         requires_consent: boolean;
     }>;
+    /** ISO 639-1 language code (e.g., "es", "fr") — AI will respond in this language */
+    language?: string;
     onVerificationStatus?: (isVerified: boolean) => void;
     onConversationId?: (id: string) => void;
     onWorkflowEvent?: (event: WorkflowEvent) => void;
@@ -670,7 +687,7 @@ interface UseChatOptions {
     onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
     onRestoredConversation?: (conversationId: string) => void;
 }
-declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, subdomain, toolConsentSettings, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult, onRestoredConversation, }: UseChatOptions): {
+declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, subdomain, toolConsentSettings, language, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult, onRestoredConversation, }: UseChatOptions): {
     messages: Message[];
     isLoading: boolean;
     activeToolCalls: ToolCall[];
@@ -817,6 +834,8 @@ interface UseWidgetStylesOptions {
     skip?: boolean;
     /** Cache key override (defaults to productId) */
     cacheKey?: string;
+    /** ISO 639-1 language code for welcome message translation */
+    language?: string;
 }
 interface UseWidgetStylesResult {
     /** Fully resolved styles ready for use */
@@ -869,6 +888,8 @@ interface UseCopilotStylesOptions {
     skip?: boolean;
     /** Cache key override (defaults to productId) */
     cacheKey?: string;
+    /** ISO 639-1 language code for welcome message translation */
+    language?: string;
 }
 interface UseCopilotStylesResult {
     /** Fully resolved styles ready for use */
@@ -914,7 +935,7 @@ interface UseCopilotStylesResult {
  * });
  * ```
  */
-declare function useWidgetStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, }: UseWidgetStylesOptions): UseWidgetStylesResult;
+declare function useWidgetStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, language, }: UseWidgetStylesOptions): UseWidgetStylesResult;
 /**
  * Hook to fetch and merge copilot styles
  *
@@ -926,7 +947,7 @@ declare function useWidgetStyles$1({ productId, apiUrl, propStyles, skip, cacheK
  * });
  * ```
  */
-declare function useCopilotStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, }: UseCopilotStylesOptions): UseCopilotStylesResult;
+declare function useCopilotStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, language, }: UseCopilotStylesOptions): UseCopilotStylesResult;
 /**
  * Clear the style cache (useful for testing or forcing refetch)
  */

package/dist/index.d.ts

@@ -384,8 +384,18 @@ interface CrowWidgetProps {
      * exists for its name, that component is rendered inline in the chat.
      */
     toolRenderers?: ToolRenderers;
+    /**
+     * ISO 639-1 language code (e.g., "es", "fr", "ja"). When set, the AI
+     * responds in that language and the welcome message is translated.
+     */
+    language?: string;
+    /**
+     * Custom CSS to inject into the widget's Shadow DOM.
+     * Appended after default styles, allowing overrides.
+     */
+    customCss?: string;
 }
-declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
+declare function CrowWidget({ productId, apiUrl, subdomain, variant, styles: propStyles, previewMode, showThinking: showThinkingProp, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, onReady, onIdentify, tools, navigate, onToolResult, getIdentityToken, context, toolRenderers, language, customCss, }: CrowWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CrowCopilotProps {
     /** Product ID for this copilot */
@@ -462,8 +472,13 @@ interface CrowCopilotProps {
      * ```
      */
     context?: Record<string, unknown>;
+    /**
+     * ISO 639-1 language code (e.g., "es", "fr", "ja"). When set, the AI
+     * responds in that language and the welcome message is translated.
+     */
+    language?: string;
 }
-declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
+declare function CrowCopilot({ productId, apiUrl, subdomain, variant, title, agentName: agentNameProp, welcomeMessage: welcomeMessageProp, position, width, defaultOpen, showClose, onClose, styles: propStyles, previewMode, className, onReady, navigate, onToolResult, toolRenderers, getIdentityToken, context, language, }: CrowCopilotProps): react_jsx_runtime.JSX.Element;
 
 interface CrowProviderProps extends CrowClientConfig {
     children: React.ReactNode;
@@ -663,6 +678,8 @@ interface UseChatOptions {
     toolConsentSettings?: Record<string, {
         requires_consent: boolean;
     }>;
+    /** ISO 639-1 language code (e.g., "es", "fr") — AI will respond in this language */
+    language?: string;
     onVerificationStatus?: (isVerified: boolean) => void;
     onConversationId?: (id: string) => void;
     onWorkflowEvent?: (event: WorkflowEvent) => void;
@@ -670,7 +687,7 @@ interface UseChatOptions {
     onToolResult?: (toolName: string, result: Record<string, unknown>) => void;
     onRestoredConversation?: (conversationId: string) => void;
 }
-declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, subdomain, toolConsentSettings, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult, onRestoredConversation, }: UseChatOptions): {
+declare function useChat({ productId, apiUrl, persistAnonymousConversations, welcomeMessage, selectedModel: initialSelectedModel, subdomain, toolConsentSettings, language, onVerificationStatus, onConversationId, onWorkflowEvent, onToolCall, onToolResult, onRestoredConversation, }: UseChatOptions): {
     messages: Message[];
     isLoading: boolean;
     activeToolCalls: ToolCall[];
@@ -817,6 +834,8 @@ interface UseWidgetStylesOptions {
     skip?: boolean;
     /** Cache key override (defaults to productId) */
     cacheKey?: string;
+    /** ISO 639-1 language code for welcome message translation */
+    language?: string;
 }
 interface UseWidgetStylesResult {
     /** Fully resolved styles ready for use */
@@ -869,6 +888,8 @@ interface UseCopilotStylesOptions {
     skip?: boolean;
     /** Cache key override (defaults to productId) */
     cacheKey?: string;
+    /** ISO 639-1 language code for welcome message translation */
+    language?: string;
 }
 interface UseCopilotStylesResult {
     /** Fully resolved styles ready for use */
@@ -914,7 +935,7 @@ interface UseCopilotStylesResult {
  * });
  * ```
  */
-declare function useWidgetStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, }: UseWidgetStylesOptions): UseWidgetStylesResult;
+declare function useWidgetStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, language, }: UseWidgetStylesOptions): UseWidgetStylesResult;
 /**
  * Hook to fetch and merge copilot styles
  *
@@ -926,7 +947,7 @@ declare function useWidgetStyles$1({ productId, apiUrl, propStyles, skip, cacheK
  * });
  * ```
  */
-declare function useCopilotStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, }: UseCopilotStylesOptions): UseCopilotStylesResult;
+declare function useCopilotStyles$1({ productId, apiUrl, propStyles, skip, cacheKey, language, }: UseCopilotStylesOptions): UseCopilotStylesResult;
 /**
  * Clear the style cache (useful for testing or forcing refetch)
  */

package/dist/index.js

@@ -46,6 +46,7 @@ function useChat({
   selectedModel: initialSelectedModel,
   subdomain,
   toolConsentSettings,
+  language,
   onVerificationStatus,
   onConversationId,
   onWorkflowEvent,
@@ -131,7 +132,8 @@ function useChat({
             user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
             user_local_time: (/* @__PURE__ */ new Date()).toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", hour12: true }),
             page_path: typeof window !== "undefined" ? window.location.pathname : void 0,
-            context: typeof window !== "undefined" ? window.__crow_page_context : void 0
+            context: typeof window !== "undefined" ? window.__crow_page_context : void 0,
+            ...language && language !== "en" ? { language } : {}
           }),
           signal: abortControllerRef.current.signal
         });
@@ -553,7 +555,8 @@ function useChat({
             model: selectedModel,
             subdomain,
             user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", hour12: true })
+            user_local_time: (/* @__PURE__ */ new Date()).toLocaleString("en-US", { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "numeric", hour12: true }),
+            ...language && language !== "en" ? { language } : {}
           })
         });
         if (!response.ok) {
@@ -1514,9 +1517,12 @@ function stylesToCSSVariables(styles) {
 
 // src/hooks/useWidgetStyles.ts
 var styleCache = /* @__PURE__ */ new Map();
-async function fetchWidgetConfig(productId, apiUrl) {
+async function fetchWidgetConfig(productId, apiUrl, language) {
   const baseUrl = apiUrl || "";
-  const url = `${baseUrl}/api/products/${productId}/widget-config`;
+  let url = `${baseUrl}/api/products/${productId}/widget-config`;
+  if (language && language !== "en") {
+    url += `?language=${encodeURIComponent(language)}`;
+  }
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`Failed to fetch widget config: ${response.status} ${response.statusText}`);
@@ -1528,9 +1534,10 @@ function useWidgetStyles({
   apiUrl,
   propStyles,
   skip = false,
-  cacheKey
+  cacheKey,
+  language
 }) {
-  const key = cacheKey || productId;
+  const key = cacheKey || (language && language !== "en" ? `${productId}:${language}` : productId);
   const [isLoading, setIsLoading] = useState(!skip && !styleCache.has(key));
   const [error, setError] = useState(null);
   const [dbStyles, setDbStyles] = useState(
@@ -1570,7 +1577,7 @@ function useWidgetStyles({
     setIsLoading(true);
     setError(null);
     try {
-      const config = await fetchWidgetConfig(productId, apiUrl);
+      const config = await fetchWidgetConfig(productId, apiUrl, language);
       styleCache.set(key, config);
       setDbStyles(config.widgetStyles);
       setAgentName(config.agentName || "Assistant");
@@ -1630,9 +1637,10 @@ function useCopilotStyles({
   apiUrl,
   propStyles,
   skip = false,
-  cacheKey
+  cacheKey,
+  language
 }) {
-  const key = cacheKey || productId;
+  const key = cacheKey || (language && language !== "en" ? `${productId}:${language}` : productId);
   const [isLoading, setIsLoading] = useState(!skip && !styleCache.has(key));
   const [error, setError] = useState(null);
   const [dbStyles, setDbStyles] = useState(
@@ -1666,7 +1674,7 @@ function useCopilotStyles({
     setIsLoading(true);
     setError(null);
     try {
-      const config = await fetchWidgetConfig(productId, apiUrl);
+      const config = await fetchWidgetConfig(productId, apiUrl, language);
       styleCache.set(key, config);
       setDbStyles(config.copilotStyles);
       setAgentName(config.agentName || "Assistant");
@@ -3504,7 +3512,9 @@ function CrowWidget({
   onToolResult,
   getIdentityToken,
   context,
-  toolRenderers
+  toolRenderers,
+  language,
+  customCss
 }) {
   const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
   const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
@@ -3526,7 +3536,8 @@ function CrowWidget({
     productId,
     apiUrl,
     propStyles,
-    skip: previewMode
+    skip: previewMode,
+    language
   });
   const agentName = agentNameProp ?? agentNameFromAPI;
   const welcomeMessage = welcomeMessageProp ?? welcomeMessageFromAPI;
@@ -3566,6 +3577,7 @@ function CrowWidget({
     selectedModel,
     subdomain,
     toolConsentSettings,
+    language,
     onVerificationStatus: (isVerified) => {
       setIsVerifiedUser(isVerified);
     },
@@ -4028,7 +4040,14 @@ function CrowWidget({
       )
     ] })
   ] });
-  return /* @__PURE__ */ jsx(ShadowContainer, { styles: WIDGET_CSS, children: /* @__PURE__ */ jsx("div", { className: "crow-widget-root", style: cssVars, children: /* @__PURE__ */ jsxs(
+  const combinedStyles = useMemo(
+    () => customCss ? `${WIDGET_CSS}
+
+/* Custom CSS */
+${customCss}` : WIDGET_CSS,
+    [customCss]
+  );
+  return /* @__PURE__ */ jsx(ShadowContainer, { styles: combinedStyles, children: /* @__PURE__ */ jsx("div", { className: "crow-widget-root", style: cssVars, children: /* @__PURE__ */ jsxs(
     WidgetStyleProvider,
     {
       styles,
@@ -4326,7 +4345,8 @@ function CrowCopilot({
   onToolResult,
   toolRenderers,
   getIdentityToken,
-  context
+  context,
+  language
 }) {
   const effectiveGetIdentityToken = getIdentityToken || window.__crow_identity_token_fetcher;
   const effectiveOnToolResult = onToolResult || window.__crow_on_tool_result;
@@ -4346,7 +4366,8 @@ function CrowCopilot({
     productId,
     apiUrl,
     propStyles,
-    skip: previewMode
+    skip: previewMode,
+    language
   });
   const agentName = agentNameProp ?? agentNameFromAPI ?? title;
   const welcomeMessage = welcomeMessageProp ?? welcomeMessageFromAPI;
@@ -4534,6 +4555,7 @@ function CrowCopilot({
     selectedModel,
     subdomain,
     toolConsentSettings,
+    language,
     onVerificationStatus: (isVerified) => {
       setIsVerifiedUser(isVerified);
     },