diff --git a/src/components/Bot.tsx b/src/components/Bot.tsx
index 9e7b76d27..fbd8bc939 100644
--- a/src/components/Bot.tsx
+++ b/src/components/Bot.tsx
@@ -508,6 +508,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
   const [feedback, setFeedback] = createSignal('');
   const [pendingActionData, setPendingActionData] = createSignal(null);
   const [feedbackType, setFeedbackType] = createSignal('');
+  const [messageRatings, setMessageRatings] = createSignal<Record<string, FeedbackRatingType>>({});
 
   // start input type
   const [startInputType, setStartInputType] = createSignal('');
@@ -579,7 +580,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
         });
     }
 
-    scrollToBottom()
+    scrollToBottom();
 
     let isProgrammaticScroll = false;
     const handleScroll = () => {
@@ -954,7 +955,7 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
       if (typeof value === 'object') return Object.keys(value as Record<string, unknown>).length === 0;
       return false;
     };
-    
+
     const shouldRemoveEmptyApiMessage = (message?: MessageType) => {
       if (!message || message.type !== 'apiMessage') return false;
       const payload = {
@@ -2676,6 +2677,8 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
                           showAvatar={props.botMessage?.showAvatar}
                           avatarSrc={props.botMessage?.avatarSrc}
                           chatFeedbackStatus={chatFeedbackStatus()}
+                          messageRatings={messageRatings()}
+                          onMessageRatingChange={(messageId, rating) => setMessageRatings((prev) => ({ ...prev, [messageId]: rating }))}
                           onRegenerateResponse={() => handleRegenerateResponse(index())}
                           onMessageRendered={scrollToBottom}
                           fontSize={props.fontSize}