@asgard-js/react 0.0.34 → 0.0.36

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

@@ -0,0 +1,18 @@
+/**
+ * 顏色工具函數
+ */
+/**
+ * 為顏色添加透明度
+ * @param color 十六進制顏色值 (例如: #FF0000)
+ * @param alpha 透明度 (0-1)
+ * @returns 帶透明度的十六進制顏色值
+ */
+export declare const addTransparency: (color: string, alpha: number) => string;
+/**
+ * 加深顏色
+ * @param color 十六進制顏色值 (例如: #FF0000)
+ * @param amount 加深程度 (0-1)
+ * @returns 加深後的十六進制顏色值
+ */
+export declare const darkenColor: (color: string, amount: 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;;GAEG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,SAAS,MAAM,KAAG,MAM9D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,UAAU,MAAM,KAAG,MAa3D,CAAC"}

package/package.json

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

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

@@ -19,6 +19,7 @@ import {
   UseChannelProps,
   UseChannelReturn,
 } from '../hooks';
+import { useAsgardAppInitializationContext } from './asgard-app-initialization-context';
 
 export interface AsgardServiceContextValue {
   avatar?: string;
@@ -68,12 +69,20 @@ export function AsgardServiceContextProvider(
     children,
     parentRef,
     config,
-    botTypingPlaceholder,
+    botTypingPlaceholder: botTypingPlaceholderFromProps,
     customChannelId,
     initMessages,
     onSseMessage,
   } = props;
 
+  const { data } = useAsgardAppInitializationContext();
+  const { annotations } = data;
+  
+  // API 優先，Props 次之，最後才是預設值
+  const botTypingPlaceholder = 
+    annotations?.embedConfig?.botTypingPlaceholder || 
+    botTypingPlaceholderFromProps;
+
   const messageBoxBottomRef = useRef<HTMLDivElement>(null);
 
   const client = useAsgardServiceClient({ config });

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

@@ -4,10 +4,12 @@ import {
   PropsWithChildren,
   ReactNode,
   useContext,
+  useEffect,
   useMemo,
   useCallback,
 } from 'react';
 import { deepMerge } from '../utils/deep-merge';
+import { addTransparency, darkenColor } from '../utils/color-utils';
 import {
   useAsgardAppInitializationContext,
   Annotations,
@@ -331,7 +333,7 @@ export function AsgardThemeContextProvider(
                 borderColor: themeFromAnnotations.chatbot?.borderColor,
                 backgroundColor: themeFromAnnotations.botMessage
                   ?.backgroundColor
-                  ? `${themeFromAnnotations.botMessage.backgroundColor}33`
+                  ? addTransparency(themeFromAnnotations.botMessage.backgroundColor, 0.2)
                   : undefined,
               },
             },
@@ -346,6 +348,9 @@ export function AsgardThemeContextProvider(
               // For unset messages
               color:
                 themeFromAnnotations.chatbot?.primaryComponent?.secondaryColor,
+              backgroundColor: themeFromAnnotations.botMessage?.backgroundColor
+                ? addTransparency(themeFromAnnotations.botMessage.backgroundColor, 0.2)
+                : undefined,
             },
           },
           ButtonMessageTemplate: {
@@ -389,6 +394,17 @@ export function AsgardThemeContextProvider(
 
   const value = useMemo(() => deepMergeTheme(), [deepMergeTheme]);
 
+  // 設置 CSS 自定義屬性
+  useEffect(() => {
+    const botMessageBgColor = annotations?.embedConfig?.theme?.botMessage?.backgroundColor;
+    if (botMessageBgColor) {
+      document.documentElement.style.setProperty(
+        '--bot-message-hyperlink-color',
+        darkenColor(botMessageBgColor, 0.2)
+      );
+    }
+  }, [annotations?.embedConfig?.theme?.botMessage?.backgroundColor]);
+
   return (
     <AsgardThemeContext.Provider value={value}>
       {children}

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

@@ -113,7 +113,13 @@ 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: 'var(--bot-message-hyperlink-color, #4467eb)' }}
+      {...props}
+    >
       {children}
     </a>
   );

package/src/utils/color-utils.ts

@@ -0,0 +1,38 @@
+/**
+ * 顏色工具函數
+ */
+
+/**
+ * 為顏色添加透明度
+ * @param color 十六進制顏色值 (例如: #FF0000)
+ * @param alpha 透明度 (0-1)
+ * @returns 帶透明度的十六進制顏色值
+ */
+export const addTransparency = (color: string, alpha: number): string => {
+  if (!color.startsWith('#')) return color;
+  
+  const hex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+
+  return `${color}${hex}`;
+};
+
+/**
+ * 加深顏色
+ * @param color 十六進制顏色值 (例如: #FF0000)
+ * @param amount 加深程度 (0-1)
+ * @returns 加深後的十六進制顏色值
+ */
+export const darkenColor = (color: string, amount: number): string => {
+  if (!color.startsWith('#')) return color;
+  
+  const hex = color.slice(1);
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  
+  const newR = Math.max(0, Math.round(r * (1 - amount)));
+  const newG = Math.max(0, Math.round(g * (1 - amount)));
+  const newB = Math.max(0, Math.round(b * (1 - amount)));
+  
+  return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
+};