From 58c708eb6ea09de3ac39ebfae8719eec19fd9b5a Mon Sep 17 00:00:00 2001 From: Sava Vidakovic Date: Mon, 9 Dec 2024 11:45:16 +0100 Subject: [PATCH] Fix: Enhance Image Handling and Fix Carousel Aspect Ratio (#94) * chore: npm audit fix * fix(image): handle large image preview --- package-lock.json | 7 +++--- packages/react/dist/RasaChatbotWidget.js | 2 +- packages/react/dist/RasaChatbotWidget.js.map | 2 +- .../react/dist/types/RasaChatbotWidget.d.ts | 2 +- .../stencil-generated/RasaChatbotWidget.ts | 2 +- packages/ui/src/components.d.ts | 16 ++++++------ .../ui/src/components/carousel/carousel.scss | 2 ++ .../ui/src/components/carousel/carousel.tsx | 6 +++-- .../image-message/image-message.scss | 3 +-- .../image-message/image-message.tsx | 4 +-- .../ui/src/components/image-message/readme.md | 16 ++++++------ .../ui/src/components/image/image.test.tsx | 6 ++--- packages/ui/src/components/image/image.tsx | 25 +++++++++++++++---- packages/ui/src/components/image/readme.md | 12 ++++----- .../rasa-chatbot-widget.scss | 2 -- 15 files changed, 62 insertions(+), 45 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc6300c..e7b32c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,7 @@ "requires": true, "packages": { "": { + "name": "chat-widget", "workspaces": [ "packages/*" ], @@ -5962,9 +5963,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "dependencies": { "path-key": "^3.1.0", diff --git a/packages/react/dist/RasaChatbotWidget.js b/packages/react/dist/RasaChatbotWidget.js index def064c..fb3c8b5 100644 --- a/packages/react/dist/RasaChatbotWidget.js +++ b/packages/react/dist/RasaChatbotWidget.js @@ -1,6 +1,6 @@ 'use client'; -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 { createComponent } from '@stencil/react-output-target/runtime'; import React from 'react'; const RasaChatbotWidget = createComponent({ tagName: 'rasa-chatbot-widget', diff --git a/packages/react/dist/RasaChatbotWidget.js.map b/packages/react/dist/RasaChatbotWidget.js.map index 07326b6..066efc3 100644 --- a/packages/react/dist/RasaChatbotWidget.js.map +++ b/packages/react/dist/RasaChatbotWidget.js.map @@ -1 +1 @@ -{"version":3,"file":"RasaChatbotWidget.js","sourceRoot":"","sources":["../lib/components/stencil-generated/RasaChatbotWidget.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAUb,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,iBAAiB,IAAI,wBAAwB,EAAE,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,mEAAmE,CAAC;AAClL,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,iBAAiB,GAA2F,eAAe,CAAoD;IACjL,OAAO,EAAE,qBAAqB;IAC9B,YAAY,EAAE,wBAAwB;IACtC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACJ,oBAAoB,EAAE,oBAAoB;QAC1C,2BAA2B,EAAE,2BAA2B;QACxD,uBAAuB,EAAE,uBAAuB;QAChD,sBAAsB,EAAE,sBAAsB;QAC9C,kBAAkB,EAAE,kBAAkB;QACtC,kBAAkB,EAAE,kBAAkB;QACtC,4BAA4B,EAAE,4BAA4B;QAC1D,+BAA+B,EAAE,+BAA+B;KACxC;IAC5B,mBAAmB,EAAE,uBAAuB;CAC/C,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"} \ No newline at end of file +{"version":3,"file":"RasaChatbotWidget.js","sourceRoot":"","sources":["../lib/components/stencil-generated/RasaChatbotWidget.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AASb,OAAO,EAAE,iBAAiB,IAAI,wBAAwB,EAAE,mBAAmB,IAAI,uBAAuB,EAAE,MAAM,+DAA+D,CAAC;AAE9K,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,iBAAiB,GAA2F,eAAe,CAAoD;IACjL,OAAO,EAAE,qBAAqB;IAC9B,YAAY,EAAE,wBAAwB;IACtC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACJ,oBAAoB,EAAE,oBAAoB;QAC1C,2BAA2B,EAAE,2BAA2B;QACxD,uBAAuB,EAAE,uBAAuB;QAChD,sBAAsB,EAAE,sBAAsB;QAC9C,kBAAkB,EAAE,kBAAkB;QACtC,kBAAkB,EAAE,kBAAkB;QACtC,4BAA4B,EAAE,4BAA4B;QAC1D,+BAA+B,EAAE,+BAA+B;KACxC;IAC5B,mBAAmB,EAAE,uBAAuB;CAC/C,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"} \ No newline at end of file diff --git a/packages/react/dist/types/RasaChatbotWidget.d.ts b/packages/react/dist/types/RasaChatbotWidget.d.ts index 08f0e31..e011ec5 100644 --- 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 - + ); } return (
- +
); diff --git a/packages/ui/src/components/image-message/image-message.scss b/packages/ui/src/components/image-message/image-message.scss index 4f8f9fa..29157c3 100644 --- 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 index 5ede181..1bb9ad4 100644 --- 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 index 1f6799b..909fff3 100644 --- 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 index 79184e8..1a09613 100644 --- 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(` - + `); }); @@ -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 index d65cad6..eb1d40a 100644 --- a/packages/ui/src/components/image/image.tsx +++ b/packages/ui/src/components/image/image.tsx @@ -17,11 +17,11 @@ export class RasaImage { /** * Image width */ - @Prop() width: number; + @Prop() width: number | string; /** * Image height */ - @Prop() height: number; + @Prop() height: number | string; @State() showFallback = false; @@ -29,15 +29,30 @@ export class RasaImage { 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 ( {this.showFallback ? ( - + ) : ( {this.alt} )} diff --git a/packages/ui/src/components/image/readme.md b/packages/ui/src/components/image/readme.md index cd67ef2..a59e58c 100644 --- 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 index 975dab7..2435a82 100644 --- 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;