@chat21/chat21-web-widget 5.1.0 → 5.1.1-rc1

package/CHANGELOG.md

@@ -6,7 +6,11 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.1.0
+# 5.1.1-rc1
+- **bug-fixed**: marked pipe not renders urls
+
+# 5.1.0-rc34
+- **bug-fixed**: css fixed carousel
 
 # 5.1.0-rc33
 - **changed**: updated "marked library" from 4.0.16 to 16.3.0 - enabled list and table

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0",
+  "version": "5.1.1-rc1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -2163,12 +2163,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         this.el.nativeElement.style.setProperty('--button-in-msg-background-color', this.g.bubbleSentBackground)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
-        this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
-
-        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
         this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
+        this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
         
+        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
     }
 
 

package/src/app/component/message/carousel/carousel.component.html

@@ -7,7 +7,8 @@
     <div class="carousel">
         <!-- <div class="card" style="width: 17px;"></div> -->
         <div class="card" *ngFor="let card of gallery; let i = index">
-            <div [style.opacity]="i+1 === activeElement? 1: 0.5">
+            <!-- <div [style.opacity]="i+1 === activeElement? 1: 0.5"> -->
+            <div>
                 <div class="card-image" *ngIf="card?.preview?.src !== ''">
                     <img [src]="card?.preview?.src" alt="img" draggable="false">
                 </div>

package/src/app/component/message/carousel/carousel.component.scss

@@ -54,7 +54,7 @@
     display: grid;
     align-items: start;
     grid-auto-flow: column;
-    grid-auto-columns: calc((100% / 3) - 12px);
+    // grid-auto-columns: calc((100% / 3) - 12px);
     // overflow-x: auto;
     overflow-x: hidden;
     scroll-snap-type: x mandatory;
@@ -270,12 +270,12 @@
 }
 @media screen and (max-width: 900px) {
 .wrapper .carousel {
-    grid-auto-columns: calc((100% / 2) - 9px);
+    // grid-auto-columns: calc((100% / 2) - 9px);
 }
 }
 @media screen and (max-width: 600px) {
 .wrapper .carousel {
-    grid-auto-columns: var(--cardWidth);
+    // grid-auto-columns: var(--cardWidth);
     // grid-auto-columns: 17px repeat(var(--cardWidth)) 17px;
 }
 }

package/src/app/component/message/text/text.component.html

@@ -1,6 +1,4 @@
-<p  #messageEl class="message_innerhtml marked" 
+<p #messageEl class="message_innerhtml marked" 
     [innerHTML]="printMessage(text, messageEl, this) | marked" 
     [style.color]="color"></p>
-<!-- [style.font-size]="fontSize"></p> -->
-<!-- [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked"  -->
-
+<!-- [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked"  -->

package/src/app/pipe/marked.pipe.ts

@@ -10,21 +10,29 @@ export class MarkedPipe implements PipeTransform {
   transform(value: any): any {
     const renderer = new marked.Renderer();
     renderer.link = function({ href, title, tokens }) {
-        const text = tokens.map(token => token.raw).join('');
-        const link = marked.Renderer.prototype.link.call(this, href, title, text);
-        return link.replace('<a', '<a target="_blank" ');
+      const text = tokens
+        ? tokens.map(token => token.raw).join('')
+        : href; // fallback se tokens non c'è
+      if (!href) return text;
+
+      return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
     };
+
     marked.setOptions({
-        renderer: renderer,
-        gfm: true,
-        breaks: true
+      renderer,
+      gfm: true,
+      breaks: true
     });
+
     if (value && value.length > 0) {
-      const text = marked(value);
-      return text;
+      try {
+        return marked.parse(value);
+      } catch (err) {
+        console.error('Errore nel parsing markdown:', err);
+        return value;
+      }
     }
     return value;
   }
 
-
 }

package/src/app/sass/_variables.scss

@@ -42,16 +42,15 @@
     --content-background-color: #fff;
     --content-text-color: var(--black);
 
-    --avatar-height: 40px;
-    --avatar-width: 40px;
-
-
     --font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif; //Mulish, sans-serif;
     --font-family-bubble-message: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
     --font-family-powered-by: Mulish, sans-serif;
 
     --font-size-bubble-message: 1.4em;
+
+    --avatar-height: 40px;
+    --avatar-width: 40px;
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/globals.ts

@@ -294,9 +294,6 @@ export class Globals {
     * false the WAITING_TIME_NOT_FOUND will always be displayed) 
     * is set to true for backward compatibility with old projects */
     this.dynamicWaitTimeReply = true;  
-    /** Hide the close button in the widget header. Permitted values: true,
-    false. The default value is false. */
-    this.hideHeaderCloseButton = false;
 
     /** if it is true, the chat window is open in fullscreen mode. Permitted
     values: true, false. Default value : false */
@@ -338,15 +335,13 @@ export class Globals {
     /** set launcher balon widget shape: can set corner by corner   */
     this.baloonShape = '50%';
     // this.parameters['isLogEnabled'] = false;
-    this.openExternalLinkButton = true;
+    this.isLogEnabled = false;
     /** Hide the header conversation Permitted values: true,
     false. The default value is false. */
     this.hideHeaderConversation= false;
     /** Hide the close button in the widget header. Permitted values: true,
     false. The default value is false. */
     this.hideHeaderCloseButton = false;
-    /** set global log. Permitted values: true, false. The default value is false.   */
-    this.isLogEnabled = false;
     /** enable to hide/show upper-right header conversation options menu */
     this.openExternalLinkButton = true;
     /** enable to close a conversation from upper-right header menu  */