@asgard-js/react 0.0.38-canary.6 → 0.0.38-canary.7

package/dist/utils/color-utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Darkens a color by a given percentage
+ * @param color - Hex color string (e.g., "#640000")
+ * @param percentage - Percentage to darken (e.g., 0.2 for 20%)
+ * @returns Darkened hex color string
+ */
+export declare function darkenColor(color: string, percentage: number): string;
+/**
+ * Lightens a color by mixing with white
+ * @param color - Hex color string (e.g., "#640000")
+ * @param percentage - Percentage to lighten (e.g., 0.8 for 20% original, 80% white)
+ * @returns Lightened hex color string
+ */
+export declare function lightenColor(color: string, percentage: number): string;
+//# sourceMappingURL=color-utils.d.ts.map

package/dist/utils/color-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../src/utils/color-utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAmBrE;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAkBtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asgard-js/react",
-  "version": "0.0.38-canary.6",
+  "version": "0.0.38-canary.7",
   "publishConfig": {
     "access": "public"
   },
@@ -54,7 +54,7 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "@asgard-js/core": "^0.0.38-canary.6",
+    "@asgard-js/core": "^0.0.38-canary.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/templates/hint-template/hint-template.module.scss

@@ -33,6 +33,10 @@
   }
 }
 
+.hint_text {
+  color: white;
+}
+
 .time {
   font-size: 12px;
   color: rgba(140, 140, 140, 1);

package/src/components/templates/hint-template/hint-template.tsx

@@ -65,7 +65,12 @@ export function HintTemplate(props: HintTemplateProps): ReactNode {
       style={themeTemplate?.HintMessageTemplate?.style}
     >
       <div className={classes.time}>{formatTime(message.time)}</div>
-      {template.text}
+      <div 
+        className={classes.hint_text}
+        style={themeTemplate?.HintMessageTemplate?.style}
+      >
+        {template.text}
+      </div>
     </div>
   );
 }

package/src/components/templates/quick-replies/quick-replies.tsx

@@ -11,7 +11,7 @@ interface QuickRepliesProps {
 export function QuickReplies(props: QuickRepliesProps): ReactNode {
   const { quickReplies } = props;
 
-  const { template } = useAsgardThemeContext();
+  const { template, botMessage } = useAsgardThemeContext();
   const { sendMessage, isConnecting } = useAsgardContext();
 
   const onClick = useCallback(
@@ -32,7 +32,10 @@ export function QuickReplies(props: QuickRepliesProps): ReactNode {
         <button
           key={quickReply.text}
           className={styles.quick_reply}
-          style={template?.quickReplies?.button?.style}
+          style={{
+            ...template?.quickReplies?.button?.style,
+            backgroundColor: botMessage?.quickReplyBackgroundColor || template?.quickReplies?.button?.style?.backgroundColor,
+          }}
           disabled={isConnecting}
           onClick={() => onClick(quickReply.text)}
         >

package/src/components/templates/text-template/text-template.tsx

@@ -19,6 +19,7 @@ export function TextTemplate(props: TextTemplateProps): ReactNode {
   const { avatar } = useAsgardContext();
 
   const theme = useAsgardThemeContext();
+  const { botMessage } = theme;
 
   const { htmlBlocks, lastTypingText } = useMarkdownRenderer(
     (message as ConversationBotMessage)?.message?.text || '',
@@ -40,9 +41,12 @@ export function TextTemplate(props: TextTemplateProps): ReactNode {
           backgroundColor: theme?.botMessage?.backgroundColor,
         };
       default:
-        return {};
+        return {
+          color: theme?.chatbot?.primaryComponent?.secondaryColor || theme?.template?.TextMessageTemplate?.style?.color,
+          backgroundColor: botMessage?.unsentBackgroundColor,
+        };
     }
-  }, [message, theme]);
+  }, [message, theme, botMessage]);
 
   if (message.type === 'error') return null;
 

package/src/context/asgard-theme-context.tsx

@@ -8,6 +8,7 @@ import {
   useCallback,
 } from 'react';
 import { deepMerge } from '../utils/deep-merge';
+import { darkenColor } from '../utils/color-utils';
 import {
   useAsgardAppInitializationContext,
   Annotations,
@@ -61,7 +62,12 @@ export interface AsgardThemeContextValue {
       };
     }>;
   };
-  botMessage: Pick<CSSProperties, 'color' | 'backgroundColor'>;
+  botMessage: Pick<CSSProperties, 'color' | 'backgroundColor'> & {
+    carouselButtonBackgroundColor?: CSSProperties['backgroundColor'];
+    linkColor?: CSSProperties['color'];
+    unsentBackgroundColor?: CSSProperties['backgroundColor'];
+    quickReplyBackgroundColor?: CSSProperties['backgroundColor'];
+  };
   userMessage: Pick<CSSProperties, 'color' | 'backgroundColor'>;
   template?: Partial<{
     /**
@@ -316,6 +322,15 @@ export function AsgardThemeContextProvider(
         botMessage: {
           backgroundColor: themeFromAnnotations.botMessage?.backgroundColor, // #585858
           color: themeFromAnnotations.botMessage?.color,
+          linkColor: themeFromAnnotations.botMessage?.backgroundColor 
+            ? darkenColor(themeFromAnnotations.botMessage.backgroundColor, 0.2)
+            : undefined,
+          unsentBackgroundColor: themeFromAnnotations.botMessage?.backgroundColor 
+            ? `color-mix(in srgb, ${themeFromAnnotations.botMessage.backgroundColor} 20%, transparent)`
+            : undefined,
+          quickReplyBackgroundColor: themeFromAnnotations.botMessage?.backgroundColor 
+            ? `color-mix(in srgb, ${themeFromAnnotations.botMessage.backgroundColor} 20%, transparent)`
+            : undefined,
         },
         userMessage: {
           backgroundColor: themeFromAnnotations.userMessage?.backgroundColor,
@@ -382,6 +397,136 @@ export function AsgardThemeContextProvider(
         },
       });
 
+      // Handle theme prop that contains backend format (like themeFromAnnotations)
+      const propsTheme = theme as any; // Cast to handle backend format
+      const propsHasBackendFormat = propsTheme.chatbot?.primaryComponent || propsTheme.chatbot?.backgroundColor || propsTheme.botMessage || propsTheme.userMessage;
+      
+      if (propsHasBackendFormat) {
+        // Apply same transformation logic as tempTheme for props theme
+        const transformedPropsTheme = deepMerge(defaultAsgardThemeContextValue as unknown as Record<string, unknown>, {
+          chatbot: {
+            backgroundColor: propsTheme.chatbot?.backgroundColor,
+            borderColor: propsTheme.chatbot?.borderColor,
+            header: {
+              style: {
+                borderBottomColor: propsTheme.chatbot?.borderColor,
+              },
+              title: {
+                style: {
+                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+                },
+              },
+              actionButton: {
+                style: {
+                  color: propsTheme.chatbot?.inactiveColor,
+                },
+              },
+            },
+            body: {
+              style: {
+                // Time/timestamp text color
+                color: propsTheme.chatbot?.inactiveColor,
+              },
+            },
+            footer: {
+              style: {
+                borderTopColor: propsTheme.chatbot?.borderColor,
+              },
+              textArea: {
+                style: {
+                  color: propsTheme.chatbot?.inactiveColor,
+                  backgroundColor: propsTheme.chatbot?.backgroundColor,
+                },
+                '::placeholder': {
+                  color: propsTheme.chatbot?.inactiveColor,
+                },
+              },
+              submitButton: {
+                style: {
+                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+                },
+              },
+              speechInputButton: {
+                style: {
+                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+                },
+              },
+            },
+          },
+          botMessage: {
+            backgroundColor: propsTheme.botMessage?.backgroundColor,
+            color: propsTheme.botMessage?.color,
+            linkColor: propsTheme.botMessage?.backgroundColor 
+              ? darkenColor(propsTheme.botMessage.backgroundColor, 0.2)
+              : undefined,
+            unsentBackgroundColor: propsTheme.botMessage?.backgroundColor 
+              ? `color-mix(in srgb, ${propsTheme.botMessage.backgroundColor} 20%, transparent)`
+              : undefined,
+            quickReplyBackgroundColor: propsTheme.botMessage?.backgroundColor 
+              ? `color-mix(in srgb, ${propsTheme.botMessage.backgroundColor} 20%, transparent)`
+              : undefined,
+          },
+          userMessage: {
+            backgroundColor: propsTheme.userMessage?.backgroundColor,
+            color: propsTheme.userMessage?.color,
+          },
+          template: {
+            quickReplies: {
+              button: {
+                style: {
+                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+                  borderColor: propsTheme.chatbot?.borderColor,
+                  backgroundColor: propsTheme.botMessage?.backgroundColor
+                    ? `${propsTheme.botMessage.backgroundColor}33`
+                    : undefined,
+                },
+              },
+            },
+            time: {
+              style: {
+                color: propsTheme.chatbot?.inactiveColor,
+              },
+            },
+            TextMessageTemplate: {
+              style: {
+                // For unset messages
+                color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+              },
+            },
+            HintMessageTemplate: {
+              style: {
+                color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+              },
+            },
+            ButtonMessageTemplate: {
+              button: {
+                style: {
+                  borderColor: propsTheme.chatbot?.borderColor,
+                  backgroundColor: propsTheme.chatbot?.primaryComponent?.mainColor,
+                  color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+                },
+              },
+            },
+            CarouselMessageTemplate: {
+              card: {
+                style: {
+                  backgroundColor: propsTheme.botMessage?.carouselButtonBackgroundColor,
+                },
+                button: {
+                  style: {
+                    borderColor: propsTheme.chatbot?.borderColor,
+                    backgroundColor: propsTheme.chatbot?.primaryComponent?.mainColor,
+                    color: propsTheme.chatbot?.primaryComponent?.secondaryColor,
+                  },
+                },
+              },
+            },
+          },
+        });
+        
+        return deepMerge(tempTheme, transformedPropsTheme);
+      }
+
       return deepMerge(tempTheme, theme);
     },
     [theme, annotations?.embedConfig?.theme]

package/src/hooks/use-react-markdown-renderer.tsx

@@ -14,6 +14,7 @@ import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 import classes from '../components/templates/text-template/text-template.module.scss';
 import { useAsgardTemplateContext } from '../context/asgard-template-context';
+import { useAsgardThemeContext } from '../context/asgard-theme-context';
 import { safeWindowOpen } from '../utils/uri-validation';
 
 interface MarkdownRenderResult {
@@ -98,9 +99,10 @@ const CodeRenderer = ({ children, className, ...props }: React.ComponentProps<'c
   );
 };
 
-// Custom link renderer to integrate defaultLinkTarget prop
+// Custom link renderer to integrate defaultLinkTarget prop and theme colors
 const LinkRenderer = ({ children, href, ...props }: React.ComponentProps<'a'>): ReactNode => {
   const { defaultLinkTarget } = useAsgardTemplateContext();
+  const { botMessage } = useAsgardThemeContext();
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
@@ -113,7 +115,17 @@ const LinkRenderer = ({ children, href, ...props }: React.ComponentProps<'a'>):
   );
 
   return (
-    <a href={href} onClick={handleClick} rel="noopener noreferrer" {...props}>
+    <a 
+      href={href} 
+      onClick={handleClick} 
+      rel="noopener noreferrer" 
+      style={{ 
+        color: botMessage?.linkColor || '#0066cc',
+        textDecoration: 'underline',
+        ...props.style 
+      }}
+      {...props}
+    >
       {children}
     </a>
   );

package/src/utils/color-utils.ts

@@ -0,0 +1,52 @@
+/**
+ * Darkens a color by a given percentage
+ * @param color - Hex color string (e.g., "#640000")
+ * @param percentage - Percentage to darken (e.g., 0.2 for 20%)
+ * @returns Darkened hex color string
+ */
+export function darkenColor(color: string, percentage: number): string {
+  // Remove # if present
+  const hex = color.replace('#', '');
+  
+  // Parse RGB values
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  
+  // Apply darkening (multiply by 1 - percentage)
+  const factor = 1 - percentage;
+  const newR = Math.round(r * factor);
+  const newG = Math.round(g * factor);
+  const newB = Math.round(b * factor);
+  
+  // Convert back to hex
+  const toHex = (n: number): string => n.toString(16).padStart(2, '0');
+  
+  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
+
+/**
+ * Lightens a color by mixing with white
+ * @param color - Hex color string (e.g., "#640000")
+ * @param percentage - Percentage to lighten (e.g., 0.8 for 20% original, 80% white)
+ * @returns Lightened hex color string
+ */
+export function lightenColor(color: string, percentage: number): string {
+  // Remove # if present
+  const hex = color.replace('#', '');
+  
+  // Parse RGB values
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  
+  // Mix with white: original + (255 - original) * percentage
+  const newR = Math.round(r + (255 - r) * percentage);
+  const newG = Math.round(g + (255 - g) * percentage);
+  const newB = Math.round(b + (255 - b) * percentage);
+  
+  // Convert back to hex
+  const toHex = (n: number): string => n.toString(16).padStart(2, '0');
+  
+  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}