@asgard-js/react 0.0.36 → 0.0.37

package/package.json

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

package/src/components/chatbot/chatbot-footer/chatbot-footer.tsx

@@ -14,20 +14,16 @@ import SendSvg from '../../../icons/send.svg?react';
 import { SpeechInputButton } from './speech-input-button';
 import clsx from 'clsx';
 import { useAsgardThemeContext } from '../../../context/asgard-theme-context';
-import { useAsgardAppInitializationContext } from '../../../context/asgard-app-initialization-context';
 
 export function ChatbotFooter(): ReactNode {
   const { sendMessage, isConnecting } = useAsgardContext();
 
   const { chatbot } = useAsgardThemeContext();
-  const { data: { annotations } } = useAsgardAppInitializationContext();
 
   const [value, setValue] = useState('');
   const [isComposing, setIsComposing] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const inputPlaceholder = annotations?.embedConfig?.inputPlaceholder || 'Enter message';
-
   const disabled = useMemo(
     () => isConnecting || !value.trim(),
     [isConnecting, value]
@@ -110,7 +106,7 @@ export function ChatbotFooter(): ReactNode {
           disabled={isConnecting}
           cols={40}
           value={value}
-          placeholder={inputPlaceholder}
+          placeholder="Enter message"
           onChange={onChange}
           onKeyDown={onKeyDown}
           onCompositionStart={() => setIsComposing(true)}

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

@@ -19,7 +19,6 @@ import {
   UseChannelProps,
   UseChannelReturn,
 } from '../hooks';
-import { useAsgardAppInitializationContext } from './asgard-app-initialization-context';
 
 export interface AsgardServiceContextValue {
   avatar?: string;
@@ -69,20 +68,12 @@ export function AsgardServiceContextProvider(
     children,
     parentRef,
     config,
-    botTypingPlaceholder: botTypingPlaceholderFromProps,
+    botTypingPlaceholder,
     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,12 +4,10 @@ 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,
@@ -333,7 +331,7 @@ export function AsgardThemeContextProvider(
                 borderColor: themeFromAnnotations.chatbot?.borderColor,
                 backgroundColor: themeFromAnnotations.botMessage
                   ?.backgroundColor
-                  ? addTransparency(themeFromAnnotations.botMessage.backgroundColor, 0.2)
+                  ? `${themeFromAnnotations.botMessage.backgroundColor}33`
                   : undefined,
               },
             },
@@ -348,9 +346,6 @@ export function AsgardThemeContextProvider(
               // For unset messages
               color:
                 themeFromAnnotations.chatbot?.primaryComponent?.secondaryColor,
-              backgroundColor: themeFromAnnotations.botMessage?.backgroundColor
-                ? addTransparency(themeFromAnnotations.botMessage.backgroundColor, 0.2)
-                : undefined,
             },
           },
           ButtonMessageTemplate: {
@@ -394,17 +389,6 @@ 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,13 +113,7 @@ const LinkRenderer = ({ children, href, ...props }: React.ComponentProps<'a'>):
   );
 
   return (
-    <a 
-      href={href} 
-      onClick={handleClick} 
-      rel="noopener noreferrer" 
-      style={{ color: 'var(--bot-message-hyperlink-color, #4467eb)' }}
-      {...props}
-    >
+    <a href={href} onClick={handleClick} rel="noopener noreferrer" {...props}>
       {children}
     </a>
   );

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

@@ -1,18 +0,0 @@
-/**
- * 顏色工具函數
- */
-/**
- * 為顏色添加透明度
- * @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

@@ -1 +0,0 @@
-{"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/src/utils/color-utils.ts

@@ -1,38 +0,0 @@
-/**
- * 顏色工具函數
- */
-
-/**
- * 為顏色添加透明度
- * @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')}`;
-};