Update styling and fix Code

RasaHQ · Feb 7, 2025 · 5b56d60 · 5b56d60
1 parent 9dd4a0f
commit 5b56d60
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 53 deletions.
diff --git a/e2e/cypress/fixtures/chatbotWidgetData.ts b/e2e/cypress/fixtures/chatbotWidgetData.ts
@@ -148,7 +148,7 @@ const botResponses = {
       { value: 'neutral', payload: '/give_neutral_feedback' },
       { value: 'negative', payload: '/give_negative_feedback' },
     ],
-    message: 'We appreciate your feedback!', // ✅ Added thank-you message
+    message: 'We appreciate your feedback!',
   },
 };
 

diff --git a/packages/sdk/src/message-parser/types/parsed-message.types.ts b/packages/sdk/src/message-parser/types/parsed-message.types.ts
@@ -66,8 +66,8 @@ export interface AccordionMessage extends BaseMessage {
 export interface RatingMessage extends BaseMessage {
   type: typeof MESSAGE_TYPES.RATING;
   text: string;
-  options: { value: string; payload: string }[]; // ✅ Updated: Removed icon/label, added payload
-  message: string; // ✅ Added: To store the thank-you message from Rasa
+  options: { value: string; payload: string }[]; 
+  message: string;
 }
 
 

diff --git a/packages/sdk/src/message-parser/utils/message-parsers.test.ts b/packages/sdk/src/message-parser/utils/message-parsers.test.ts
@@ -189,7 +189,7 @@ describe('MessageParsers', () => {
         { value: 'neutral', payload: '/give_neutral_feedback' },
         { value: 'negative', payload: '/give_negative_feedback' },
       ],
-      message: 'We appreciate your feedback!', // ✅ Added the message field
+      message: 'We appreciate your feedback!',
     };
 
     const expected: RatingMessage = {
@@ -201,7 +201,7 @@ describe('MessageParsers', () => {
         { value: 'neutral', payload: '/give_neutral_feedback' },
         { value: 'negative', payload: '/give_negative_feedback' },
       ],
-      message: 'We appreciate your feedback!', // ✅ Ensure message is tested
+      message: 'We appreciate your feedback!',
     };
 
     expect(MessageParsers.rating(ratingResponse, sender)).toEqual(expected);

diff --git a/packages/sdk/src/message-parser/utils/message-parsers.ts b/packages/sdk/src/message-parser/utils/message-parsers.ts
@@ -90,9 +90,9 @@ export const MessageParsers = {
     text: message.text,
     options: message.options.map(option => ({
       value: option.value,
-      payload: option.payload // ✅ Ensure payload is included
+      payload: option.payload
     })),
-    message: message.message, // ✅ Ensure the thank-you message is passed
+    message: message.message,
     timestamp: message.timestamp,
   }),
 

diff --git a/packages/sdk/src/types/server-response.types.ts b/packages/sdk/src/types/server-response.types.ts
@@ -31,8 +31,8 @@ export interface CarouselResponse extends BaseMessageResponse {
 export interface RatingResponse extends BaseMessageResponse {
   type: typeof RESPONSE_MESSAGE_TYPES.RATING;
   text: string;
-  options: { value: string; payload: string }[]; // ✅ Updated: Removed icon/label, added payload
-  message: string; // ✅ Added: To store the thank-you message from Rasa
+  options: { value: string; payload: string }[];
+  message: string;
 }
 
 export interface QuickReplyResponse extends BaseMessageResponse {

diff --git a/packages/ui/src/components/rating/icons.ts b/packages/ui/src/components/rating/icons.ts
@@ -0,0 +1,23 @@
+export const ratingIcons = {
+    positive: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="12" cy="12" r="10" fill="white" stroke="#4CAF50" stroke-width="2"/>
+                  <circle cx="9" cy="10" r="1.5" fill="#4CAF50"/>
+                  <circle cx="15" cy="10" r="1.5" fill="#4CAF50"/>
+                  <path d="M8.5 14.5c1.75 2 5.25 2 7 0" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>`,
+
+    neutral: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="12" cy="12" r="10" fill="white" stroke="#FFEB3B" stroke-width="2"/>
+                  <circle cx="9" cy="10" r="1.5" fill="#FFEB3B"/>
+                  <circle cx="15" cy="10" r="1.5" fill="#FFEB3B"/>
+                  <path d="M8.5 14h7" stroke="#FFEB3B" stroke-width="2" stroke-linecap="round"/>
+                </svg>`,
+
+    negative: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="12" cy="12" r="10" fill="white" stroke="#F44336" stroke-width="2"/>
+                  <circle cx="9" cy="10" r="1.5" fill="#F44336"/>
+                  <circle cx="15" cy="10" r="1.5" fill="#F44336"/>
+                  <path d="M8.5 15.5c1.75-2 5.25-2 7 0" stroke="#F44336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>`
+  };
+
diff --git a/packages/ui/src/components/rating/rating.scss b/packages/ui/src/components/rating/rating.scss
@@ -12,15 +12,18 @@
     font-size: 1rem;
     font-weight: 500;
     color: var(--rating-instruction-color, #333);
+    text-align: left;
+    width: 100%;
+    display: block;
   }
 
   &__thank-you {
     margin: 0;
-    font-size: 1rem; /* Slightly larger for emphasis */
-    font-weight: 600; /* Bolder for prominence */
-    color: var(--rating-thank-you-color, #4CAF50); /* Match success color */
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--rating-thank-you-color, #4CAF50);
     text-align: center;
-    animation: fadeIn 0.3s ease-in-out; /* Smooth fade-in animation */
+    animation: fadeIn 0.3s ease-in-out;
   }
 
   &__options {
@@ -32,18 +35,19 @@
   }
 
   &__option {
-    flex: 1 1 0;
-    max-width: 100px;
+    width: 60px;
+    height: 60px;
     background: var(--rating-option-background-color, #fff);
     border: 1px solid var(--rating-option-border-color, #ddd);
     border-radius: 8px;
-    padding: 8px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
     transition: transform 0.2s ease, background-color 0.3s, box-shadow 0.3s;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    flex: none;
 
     &:hover {
       background: var(--rating-option-hover-color, #f9f9f9);
@@ -62,7 +66,9 @@
   &__icon {
     width: 40px;
     height: 40px;
-    margin-bottom: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     svg {
       width: 100%;
@@ -76,6 +82,7 @@
     font-weight: 500;
     color: var(--rating-option-label-color, #444);
     text-align: center;
+    display: block;
   }
 }
 
@@ -85,7 +92,8 @@
   }
 
   .rasa-rating__option {
-    max-width: 80px;
+    width: 50px;
+    height: 50px;
     padding: 6px;
   }
 
@@ -94,7 +102,6 @@
   }
 }
 
-/* Fade-in animation for the thank-you message */
 @keyframes fadeIn {
   from {
     opacity: 0;

diff --git a/packages/ui/src/components/rating/rating.tsx b/packages/ui/src/components/rating/rating.tsx
@@ -1,5 +1,6 @@
 import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';
 import { messageQueueService } from '../../store/message-queue';
+import { ratingIcons } from './icons';
 
 @Component({
   tag: 'rasa-rating',
@@ -49,7 +50,7 @@ export class RasaRating {
   private handleOptionClick(optionValue: string, payload: string) {
     this.selectedOption = optionValue;
     this.hasVoted = true;
-    this.ratingSelected.emit({ value: optionValue, payload }); // Send payload to Rasa
+    this.ratingSelected.emit({ value: optionValue, payload });
   }
 
   private getParsedOptions(): { value: string; payload: string }[] {
@@ -64,41 +65,13 @@ export class RasaRating {
     return this.options;
   }
 
-  private getIconForValue(value: string): string {
-    switch (value) {
-      case 'positive':
-        return `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <circle cx="12" cy="12" r="10" fill="white" stroke="#4CAF50" stroke-width="2"/>
-                  <circle cx="9" cy="10" r="1.5" fill="#4CAF50"/>
-                  <circle cx="15" cy="10" r="1.5" fill="#4CAF50"/>
-                  <path d="M8.5 14.5c1.75 2 5.25 2 7 0" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>`;
-      case 'neutral':
-        return `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <circle cx="12" cy="12" r="10" fill="white" stroke="#FFEB3B" stroke-width="2"/>
-                  <circle cx="9" cy="10" r="1.5" fill="#FFEB3B"/>
-                  <circle cx="15" cy="10" r="1.5" fill="#FFEB3B"/>
-                  <path d="M8.5 14h7" stroke="#FFEB3B" stroke-width="2" stroke-linecap="round"/>
-                </svg>`;
-      case 'negative':
-        return `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <circle cx="12" cy="12" r="10" fill="white" stroke="#F44336" stroke-width="2"/>
-                  <circle cx="9" cy="10" r="1.5" fill="#F44336"/>
-                  <circle cx="15" cy="10" r="1.5" fill="#F44336"/>
-                  <path d="M8.5 15.5c1.75-2 5.25-2 7 0" stroke="#F44336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>`;
-      default:
-        return '';
-    }
-  }
-
   render() {
     const parsedOptions = this.getParsedOptions();
 
     return (
       <div class="rasa-rating">
         {this.hasVoted ? (
-          <p class="rasa-rating__thank-you">{this.message}</p> // Dynamic message from Rasa
+          <p class="rasa-rating__thank-you">{this.message}</p>
         ) : (
           <div>
             <p class="rasa-rating__text">{this.text}</p>
@@ -111,7 +84,7 @@ export class RasaRating {
                     'rasa-rating__option--selected': this.selectedOption === option.value,
                   }}
                   onClick={() => this.handleOptionClick(option.value, option.payload)}
-                  innerHTML={this.getIconForValue(option.value)}
+                  innerHTML={ratingIcons[option.value] || ''}
                 ></button>
               ))}
             </div>

diff --git a/packages/ui/src/rasa-chatbot-widget/rasa-chatbot-widget.tsx b/packages/ui/src/rasa-chatbot-widget/rasa-chatbot-widget.tsx
@@ -408,11 +408,10 @@ export class RasaChatbotWidget {
               <rasa-rating
                 text={message.text}
                 options={JSON.stringify(message.options)}
-                message={message.message} // ✅ Pass the message field dynamically
+                message={message.message}
                 onRatingSelected={(event) => {
                   console.log("Rating selected:", event.detail.value);
-                  console.log("Payload triggered:", event.detail.payload); // ✅ Log the payload from Rasa
-                  // Send the payload to Rasa backend (if needed)
+                  console.log("Payload triggered:", event.detail.payload);
                 }}
               ></rasa-rating>
             </chat-message>