Fix: Enhance Image Handling and Fix Carousel Aspect Ratio (#94)

* chore: npm audit fix * fix(image): handle large image preview
RasaHQ · Dec 9, 2024 · 58c708e · 58c708e
1 parent d4e78ff
commit 58c708e
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/dist/RasaChatbotWidget.js b/packages/react/dist/RasaChatbotWidget.js
diff --git a/packages/react/dist/RasaChatbotWidget.js.map b/packages/react/dist/RasaChatbotWidget.js.map
diff --git a/packages/react/dist/types/RasaChatbotWidget.d.ts b/packages/react/dist/types/RasaChatbotWidget.d.ts
@@ -1,5 +1,5 @@
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { RasaChatbotWidget as RasaChatbotWidgetElement } from "@rasahq/chat-widget-ui/dist/components/rasa-chatbot-widget.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 type RasaChatbotWidgetEvents = {
     onChatSessionStarted: EventName<CustomEvent<{
         sessionId: string;

diff --git a/packages/react/lib/components/stencil-generated/RasaChatbotWidget.ts b/packages/react/lib/components/stencil-generated/RasaChatbotWidget.ts
@@ -7,9 +7,9 @@
 
 /* eslint-disable */
 
+import { RasaChatbotWidget as RasaChatbotWidgetElement, defineCustomElement as defineRasaChatbotWidget } from "@rasahq/chat-widget-ui/dist/components/rasa-chatbot-widget.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
-import { RasaChatbotWidget as RasaChatbotWidgetElement, defineCustomElement as defineRasaChatbotWidget } from "@rasahq/chat-widget-ui/dist/components/rasa-chatbot-widget.js";
 import React from 'react';
 
 type RasaChatbotWidgetEvents = {

diff --git a/packages/ui/src/components.d.ts b/packages/ui/src/components.d.ts
@@ -368,21 +368,21 @@ export namespace Components {
         /**
           * Image height
          */
-        "height": number;
+        "height": number | string;
         /**
           * Image source
          */
         "src": string;
         /**
           * Image width
          */
-        "width": number;
+        "width": number | string;
     }
     interface RasaImageMessage {
         /**
           * Image height
          */
-        "height": number;
+        "height": number | string;
         /**
           * Alt text for the image
          */
@@ -402,7 +402,7 @@ export namespace Components {
         /**
           * Image width
          */
-        "width": number;
+        "width": number | string;
     }
     interface RasaQuickReply {
         /**
@@ -1201,21 +1201,21 @@ declare namespace LocalJSX {
         /**
           * Image height
          */
-        "height"?: number;
+        "height"?: number | string;
         /**
           * Image source
          */
         "src"?: string;
         /**
           * Image width
          */
-        "width"?: number;
+        "width"?: number | string;
     }
     interface RasaImageMessage {
         /**
           * Image height
          */
-        "height"?: number;
+        "height"?: number | string;
         /**
           * Alt text for the image
          */
@@ -1235,7 +1235,7 @@ declare namespace LocalJSX {
         /**
           * Image width
          */
-        "width"?: number;
+        "width"?: number | string;
     }
     interface RasaQuickReply {
         /**

diff --git a/packages/ui/src/components/carousel/carousel.scss b/packages/ui/src/components/carousel/carousel.scss
@@ -26,6 +26,7 @@
   &__slide {
     transition: transform 0.5s ease-in-out;
     opacity: 1;
+    height: 100%;
 
     &--active {
       opacity: 2;
@@ -65,6 +66,7 @@
 
   &__image {
     width: 188px;
+    height: 100%;
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
     border-top-left-radius: 4px;

diff --git a/packages/ui/src/components/carousel/carousel.tsx b/packages/ui/src/components/carousel/carousel.tsx
@@ -2,6 +2,8 @@ import { CarouselElement } from '@rasahq/chat-widget-sdk';
 import { Component, h, State, Element, Prop, Event, EventEmitter } from '@stencil/core';
 import { messageQueueService } from '../../store/message-queue';
 
+const CAROUSEL_IMAGE_HEIGHT = 112;
+
 @Component({
   tag: 'rasa-carousel',
   styleUrl: 'carousel.scss',
@@ -60,14 +62,14 @@ export class RasaCarousel {
     if (!link) {
       return (
         <div class={{ 'carousel__slide': true, 'carousel__slide--active': index === this.currentIndex }}>
-          <rasa-image-message class="carousel__image" height={112} text={text} imageSrc={imageUrl} width={188}></rasa-image-message>
+          <rasa-image-message class="carousel__image" height={CAROUSEL_IMAGE_HEIGHT} width={'auto'} text={text} imageSrc={imageUrl}></rasa-image-message>
         </div>
       );
     }
     return (
       <a href={link} target="_blank" onClick={this.onLinkClick}>
         <div class={{ 'carousel__slide': true, 'carousel__slide--active': index === this.currentIndex }}>
-          <rasa-image-message class="carousel__image" height={112} text={text} imageSrc={imageUrl} width={188}></rasa-image-message>
+          <rasa-image-message class="carousel__image" height={CAROUSEL_IMAGE_HEIGHT} width={'auto'} text={text} imageSrc={imageUrl}></rasa-image-message>
         </div>
       </a>
     );

diff --git a/packages/ui/src/components/image-message/image-message.scss b/packages/ui/src/components/image-message/image-message.scss
@@ -7,9 +7,8 @@
 
 .image-message {
   &__image {
-    max-width: var(--image-width);
-    max-height: var(--image-height);
     overflow: hidden;
+    text-align: center;
     border-top-left-radius: 4px;
     border-top-right-radius: 20px;
 

diff --git a/packages/ui/src/components/image-message/image-message.tsx b/packages/ui/src/components/image-message/image-message.tsx
@@ -22,11 +22,11 @@ export class RasaImageMessage {
   /**
    * Image width
    */
-  @Prop() width: number;
+  @Prop() width: number | string;
   /**
    * Image height
    */
-  @Prop() height: number;
+  @Prop() height: number | string;
 
   /**
    * Is another component using it as child component

diff --git a/packages/ui/src/components/image-message/readme.md b/packages/ui/src/components/image-message/readme.md
@@ -7,14 +7,14 @@
 
 ## Properties
 
-| Property   | Attribute   | Description                                      | Type      | Default     |
-| ---------- | ----------- | ------------------------------------------------ | --------- | ----------- |
-| `height`   | `height`    | Image height                                     | `number`  | `undefined` |
-| `imageAlt` | `image-alt` | Alt text for the image                           | `string`  | `''`        |
-| `imageSrc` | `image-src` | Image source                                     | `string`  | `undefined` |
-| `isChild`  | `is-child`  | Is another component using it as child component | `boolean` | `false`     |
-| `text`     | `text`      | Message text                                     | `string`  | `undefined` |
-| `width`    | `width`     | Image width                                      | `number`  | `undefined` |
+| Property   | Attribute   | Description                                      | Type               | Default     |
+| ---------- | ----------- | ------------------------------------------------ | ------------------ | ----------- |
+| `height`   | `height`    | Image height                                     | `number \| string` | `undefined` |
+| `imageAlt` | `image-alt` | Alt text for the image                           | `string`           | `''`        |
+| `imageSrc` | `image-src` | Image source                                     | `string`           | `undefined` |
+| `isChild`  | `is-child`  | Is another component using it as child component | `boolean`          | `false`     |
+| `text`     | `text`      | Message text                                     | `string`           | `undefined` |
+| `width`    | `width`     | Image width                                      | `number \| string` | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui/src/components/image/image.test.tsx b/packages/ui/src/components/image/image.test.tsx
@@ -24,7 +24,7 @@ describe('rasa-image', () => {
     await page.waitForChanges();
 
     expect(page.root.shadowRoot).toEqualHtml(`
-    <rasa-icon-default-image-fallback style="width: auto; height: auto;"></rasa-icon-default-image-fallback>
+    <rasa-icon-default-image-fallback style="width: 100%; height: 100%;"></rasa-icon-default-image-fallback>
     `);
   });
 
@@ -46,7 +46,7 @@ describe('rasa-image', () => {
     });
 
     const img = page.root.shadowRoot.querySelector('img');
-    expect(img.style.width).toBe('auto');
-    expect(img.style.height).toBe('auto');
+    expect(img.style.width).toBe('100%');
+    expect(img.style.height).toBe('100%');
   });
 });
diff --git a/packages/ui/src/components/image/image.tsx b/packages/ui/src/components/image/image.tsx
@@ -17,27 +17,42 @@ export class RasaImage {
   /**
    * Image width
    */
-  @Prop() width: number;
+  @Prop() width: number | string;
   /**
    * Image height
    */
-  @Prop() height: number;
+  @Prop() height: number | string;
 
   @State() showFallback = false;
 
   private handleImgError = () => {
     this.showFallback = true;
   };
 
+
+  private getDimension(value?: number | string): string {
+    if (!value) return '100%';
+
+    const numericValue = Number(value);
+    if (!isNaN(numericValue)) {
+      return `${numericValue}px`;
+    }
+
+    return value as string;
+  }
+
   render() {
     const style = {
-      width: this.width ? `${this.width}px` : 'auto',
-      height: this.height ? `${this.height}px` : 'auto',
+      width: this.getDimension(this.width),
+      height: this.getDimension(this.height),
     };
+
+    const size = typeof this.width === 'number' ? this.width : undefined;
+
     return (
       <Host>
         {this.showFallback ? (
-          <rasa-icon-default-image-fallback style={style} size={this.width}></rasa-icon-default-image-fallback>
+          <rasa-icon-default-image-fallback style={style} size={size}></rasa-icon-default-image-fallback>
         ) : (
           <img src={this.src} alt={this.alt} onError={this.handleImgError} style={style} />
         )}

diff --git a/packages/ui/src/components/image/readme.md b/packages/ui/src/components/image/readme.md
@@ -7,12 +7,12 @@
 
 ## Properties
 
-| Property | Attribute | Description            | Type     | Default     |
-| -------- | --------- | ---------------------- | -------- | ----------- |
-| `alt`    | `alt`     | Alt text for the image | `string` | `''`        |
-| `height` | `height`  | Image height           | `number` | `undefined` |
-| `src`    | `src`     | Image source           | `string` | `undefined` |
-| `width`  | `width`   | Image width            | `number` | `undefined` |
+| Property | Attribute | Description            | Type               | Default     |
+| -------- | --------- | ---------------------- | ------------------ | ----------- |
+| `alt`    | `alt`     | Alt text for the image | `string`           | `''`        |
+| `height` | `height`  | Image height           | `number \| string` | `undefined` |
+| `src`    | `src`     | Image source           | `string`           | `undefined` |
+| `width`  | `width`   | Image width            | `number \| string` | `undefined` |
 
 
 ## Dependencies

diff --git a/packages/ui/src/rasa-chatbot-widget/rasa-chatbot-widget.scss b/packages/ui/src/rasa-chatbot-widget/rasa-chatbot-widget.scss
@@ -4,9 +4,7 @@
   right: 20px;
   z-index: 99999999;
   --chat-message-max-width: 289px;
-  --image-height: 170px;
   --video-height: 170px;
-  --image-width: 289px;
 
   &__container {
     position: relative;