add feeback color

README.md

@@ -137,6 +137,9 @@ You can also customize chatbot with different configuration
           textColor: '#303235',
           sendButtonColor: '#3B81F6',
         },
+        feedback: {
+          color: '#303235',
+        },
       },
     },
   });

dist/components/Bot.d.ts

@@ -1,4 +1,4 @@
-import { BotMessageTheme, TextInputTheme, UserMessageTheme } from '@/features/bubble/types';
+import { BotMessageTheme, TextInputTheme, UserMessageTheme, FeedbackTheme } from '@/features/bubble/types';
 export type FileEvent<T = EventTarget> = {
     target: T;
 };
@@ -40,6 +40,7 @@ export type BotProps = {
     botMessage?: BotMessageTheme;
     userMessage?: UserMessageTheme;
     textInput?: TextInputTheme;
+    feedback?: FeedbackTheme;
     poweredByTextColor?: string;
     badgeBackgroundColor?: string;
     bubbleBackgroundColor?: string;

dist/components/bubbles/BotBubble.d.ts

@@ -11,6 +11,7 @@ type Props = {
     textColor?: string;
     chatFeedbackStatus?: boolean;
     fontSize?: number;
+    feedbackColor?: string;
 };
 export declare const BotBubble: (props: Props) => import("solid-js").JSX.Element;
 export {};

dist/components/buttons/FeedbackButtons.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
 type RatingButtonProps = {
-    sendButtonColor?: string;
+    feedbackColor?: string;
     isDisabled?: boolean;
     isLoading?: boolean;
     disableIcon?: boolean;

dist/features/bubble/types.d.ts

@@ -23,6 +23,9 @@ export type BotMessageTheme = {
     showAvatar?: boolean;
     avatarSrc?: string;
 };
+export type FeedbackTheme = {
+    color?: string;
+};
 export type ChatWindowTheme = {
     showTitle?: boolean;
     title?: string;
@@ -36,6 +39,7 @@ export type ChatWindowTheme = {
     userMessage?: UserMessageTheme;
     botMessage?: BotMessageTheme;
     textInput?: TextInputTheme;
+    feedback?: FeedbackTheme;
     poweredByTextColor?: string;
 };
 export type ButtonTheme = {

src/components/Bot.tsx

@@ -7,7 +7,7 @@ import { BotBubble } from './bubbles/BotBubble';
 import { LoadingBubble } from './bubbles/LoadingBubble';
 import { SourceBubble } from './bubbles/SourceBubble';
 import { StarterPromptBubble } from './bubbles/StarterPromptBubble';
-import { BotMessageTheme, TextInputTheme, UserMessageTheme } from '@/features/bubble/types';
+import { BotMessageTheme, TextInputTheme, UserMessageTheme, FeedbackTheme } from '@/features/bubble/types';
 import { Badge } from './Badge';
 import socketIOClient from 'socket.io-client';
 import { Popup } from '@/features/popup';
@@ -67,6 +67,7 @@ export type BotProps = {
   botMessage?: BotMessageTheme;
   userMessage?: UserMessageTheme;
   textInput?: TextInputTheme;
+  feedback?: FeedbackTheme;
   poweredByTextColor?: string;
   badgeBackgroundColor?: string;
   bubbleBackgroundColor?: string;
@@ -848,6 +849,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
                         apiHost={props.apiHost}
                         backgroundColor={props.botMessage?.backgroundColor}
                         textColor={props.botMessage?.textColor}
+                        feedbackColor={props.feedback?.color}
                         showAvatar={props.botMessage?.showAvatar}
                         avatarSrc={props.botMessage?.avatarSrc}
                         chatFeedbackStatus={chatFeedbackStatus()}

src/components/bubbles/BotBubble.tsx

@@ -18,6 +18,7 @@ type Props = {
   textColor?: string;
   chatFeedbackStatus?: boolean;
   fontSize?: number;
+  feedbackColor?: string;
 };
 
 const defaultBackgroundColor = '#f7f8ff';
@@ -175,12 +176,17 @@ export const BotBubble = (props: Props) => {
       {props.chatFeedbackStatus && props.message.messageId && (
         <>
           <div class="flex items-center px-2">
-            <CopyToClipboardButton onClick={() => copyMessageToClipboard()} />
+            <CopyToClipboardButton feedbackColor={props.feedbackColor} onClick={() => copyMessageToClipboard()} />
             {rating() === '' || rating() === 'THUMBS_UP' ? (
-              <ThumbsUpButton isDisabled={rating() === 'THUMBS_UP'} rating={rating()} onClick={onThumbsUpClick} />
+              <ThumbsUpButton feedbackColor={props.feedbackColor} isDisabled={rating() === 'THUMBS_UP'} rating={rating()} onClick={onThumbsUpClick} />
             ) : null}
             {rating() === '' || rating() === 'THUMBS_DOWN' ? (
-              <ThumbsDownButton isDisabled={rating() === 'THUMBS_DOWN'} rating={rating()} onClick={onThumbsDownClick} />
+              <ThumbsDownButton
+                feedbackColor={props.feedbackColor}
+                isDisabled={rating() === 'THUMBS_DOWN'}
+                rating={rating()}
+                onClick={onThumbsDownClick}
+              />
             ) : null}
           </div>
           <Show when={showFeedbackContentDialog()}>

src/components/buttons/FeedbackButtons.tsx

@@ -3,13 +3,15 @@ import { Spinner } from './SendButton';
 import { ClipboardIcon, ThumbsDownIcon, ThumbsUpIcon } from '../icons';
 
 type RatingButtonProps = {
-  sendButtonColor?: string;
+  feedbackColor?: string;
   isDisabled?: boolean;
   isLoading?: boolean;
   disableIcon?: boolean;
   rating?: string;
 } & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
 
+const defaultFeedbackColor = '#3B81F6';
+
 export const CopyToClipboardButton = (props: RatingButtonProps) => {
   return (
     <button
@@ -23,7 +25,7 @@ export const CopyToClipboardButton = (props: RatingButtonProps) => {
       title="Copy to clipboard"
     >
       <Show when={!props.isLoading} fallback={<Spinner class="text-white" />}>
-        <ClipboardIcon color={props.sendButtonColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
+        <ClipboardIcon color={props.feedbackColor ?? defaultFeedbackColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
       </Show>
     </button>
   );
@@ -43,7 +45,7 @@ export const ThumbsUpButton = (props: RatingButtonProps) => {
       title="Thumbs Up"
     >
       <Show when={!props.isLoading} fallback={<Spinner class="text-white" />}>
-        <ThumbsUpIcon color={props.sendButtonColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
+        <ThumbsUpIcon color={props.feedbackColor ?? defaultFeedbackColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
       </Show>
     </button>
   );
@@ -63,7 +65,7 @@ export const ThumbsDownButton = (props: RatingButtonProps) => {
       title="Thumbs Down"
     >
       <Show when={!props.isLoading} fallback={<Spinner class="text-white" />}>
-        <ThumbsDownIcon color={props.sendButtonColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
+        <ThumbsDownIcon color={props.feedbackColor ?? defaultFeedbackColor} class={'send-icon flex ' + (props.disableIcon ? 'hidden' : '')} />
       </Show>
     </button>
   );

src/components/icons/ThumbsDownIcon.tsx

@@ -7,7 +7,7 @@ export const ThumbsDownIcon = (props: JSX.SvgSVGAttributes<SVGSVGElement>) => (
     width="24"
     height="24"
     viewBox="0 0 24 24"
-    fill={props.color ?? 'none'}
+    fill="none"
     stroke={props.color ?? defaultButtonColor}
     stroke-width="2"
     stroke-linecap="round"

src/components/icons/ThumbsUpIcon.tsx

@@ -7,7 +7,7 @@ export const ThumbsUpIcon = (props: JSX.SvgSVGAttributes<SVGSVGElement>) => (
     width="24"
     height="24"
     viewBox="0 0 24 24"
-    fill={props.color ?? 'none'}
+    fill="none"
     stroke={props.color ?? defaultButtonColor}
     stroke-width="2"
     stroke-linecap="round"

src/features/bubble/components/Bubble.tsx

@@ -68,6 +68,7 @@ export const Bubble = (props: BubbleProps) => {
             textInput={bubbleProps.theme?.chatWindow?.textInput}
             botMessage={bubbleProps.theme?.chatWindow?.botMessage}
             userMessage={bubbleProps.theme?.chatWindow?.userMessage}
+            feedback={bubbleProps.theme?.chatWindow?.feedback}
             fontSize={bubbleProps.theme?.chatWindow?.fontSize}
             chatflowid={props.chatflowid}
             chatflowConfig={props.chatflowConfig}

src/features/bubble/types.ts

@@ -28,6 +28,10 @@ export type BotMessageTheme = {
   avatarSrc?: string;
 };
 
+export type FeedbackTheme = {
+  color?: string;
+};
+
 export type ChatWindowTheme = {
   showTitle?: boolean;
   title?: string;
@@ -41,6 +45,7 @@ export type ChatWindowTheme = {
   userMessage?: UserMessageTheme;
   botMessage?: BotMessageTheme;
   textInput?: TextInputTheme;
+  feedback?: FeedbackTheme;
   poweredByTextColor?: string;
 };
 

src/features/full/components/Full.tsx

@@ -52,6 +52,7 @@ export const Full = (props: FullProps, { element }: { element: HTMLElement }) =>
             textInput={props.theme?.chatWindow?.textInput}
             botMessage={props.theme?.chatWindow?.botMessage}
             userMessage={props.theme?.chatWindow?.userMessage}
+            feedback={props.theme?.chatWindow?.feedback}
             fontSize={props.theme?.chatWindow?.fontSize}
             chatflowid={props.chatflowid}
             chatflowConfig={props.chatflowConfig}