added crop followup with long text & show tooltip

updated amount of related links to show
aws · Nov 1, 2023 · 527224e · 527224e
1 parent 1847491
commit 527224e
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/src/components/chat-item/chat-item-followup.ts b/src/components/chat-item/chat-item-followup.ts
@@ -8,11 +8,16 @@ import { DomBuilder, DomBuilderObject, ExtendedHTMLElement } from '../../helper/
 import { MynahUIGlobalEvents } from '../../helper/events';
 import { ChatItem, MynahEventNames } from '../../static';
 import { Icon } from '../icon';
+import { Overlay, OverlayHorizontalDirection, OverlayVerticalDirection } from '../overlay/overlay';
 
+const PREVIEW_DELAY = 250;
+const MAX_LENGTH = 40;
 export interface ChatItemFollowUpProps {tabId: string; chatItem: ChatItem}
 export class ChatItemFollowUpContainer {
   private readonly props: ChatItemFollowUpProps;
   render: ExtendedHTMLElement;
+  private followupTooltip: Overlay | null;
+  private followupTooltipTimeout: ReturnType<typeof setTimeout>;
   constructor (props: ChatItemFollowUpProps) {
     this.props = props;
     this.props.chatItem = props.chatItem;
@@ -38,15 +43,24 @@ export class ChatItemFollowUpContainer {
                       new Icon({ icon: followUpOption.icon }).render
                     ]
                   : []),
-                followUpOption.pillText
+                followUpOption.pillText.length > MAX_LENGTH ? `${followUpOption.pillText.substring(0, MAX_LENGTH - 3)}...` : followUpOption.pillText
               ],
               events: {
                 click: (e) => {
+                  this.hideCroppedFollowupText();
                   MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.FOLLOW_UP_CLICKED, { tabId: this.props.tabId, followUpOption });
                   if ((this.render.parentElement as ExtendedHTMLElement)?.hasClass('mynah-chat-item-empty')) {
                     this.render.parentElement?.remove();
                   };
-                }
+                },
+                ...(followUpOption.pillText.length > MAX_LENGTH
+                  ? {
+                      mouseover: (e) => {
+                        this.showCroppedFollowupText(e, followUpOption.pillText);
+                      },
+                      mouseleave: this.hideCroppedFollowupText
+                    }
+                  : {})
               }
             }
           )) as DomBuilderObject[]
@@ -71,4 +85,43 @@ export class ChatItemFollowUpContainer {
       };
     });
   }
+
+  private readonly showCroppedFollowupText = (e: MouseEvent, content: string): void => {
+    if (content.trim() !== undefined) {
+      clearTimeout(this.followupTooltipTimeout);
+      this.followupTooltipTimeout = setTimeout(() => {
+        const elm: HTMLElement = e.target as HTMLElement;
+        this.followupTooltip = new Overlay({
+          background: false,
+          closeOnOutsideClick: false,
+          referenceElement: elm,
+          dimOutside: false,
+          removeOtherOverlays: true,
+          verticalDirection: OverlayVerticalDirection.TO_TOP,
+          horizontalDirection: OverlayHorizontalDirection.START_TO_RIGHT,
+          children: [
+            {
+              type: 'div',
+              classNames: [ 'mynah-chat-related-content-preview-wrapper' ],
+              children: [
+                {
+                  type: 'div',
+                  classNames: [ 'mynah-chat-related-content-preview-content' ],
+                  innerHTML: marked(content, { breaks: true }).replace('<p>', '').replace('</p>', '')
+                }
+              ]
+            }
+          ],
+        });
+      }, PREVIEW_DELAY);
+    }
+  };
+
+  private readonly hideCroppedFollowupText = (): void => {
+    clearTimeout(this.followupTooltipTimeout);
+    if (this.followupTooltip !== null) {
+      this.followupTooltip?.close();
+      this.followupTooltip = null;
+    }
+  };
 }
diff --git a/src/components/chat-item/chat-item-related-content.ts b/src/components/chat-item/chat-item-related-content.ts
@@ -13,7 +13,7 @@ import { SuggestionCard } from '../suggestion-card/suggestion-card';
 import { SuggestionCardBody } from '../suggestion-card/suggestion-card-body';
 
 const PREVIEW_DELAY = 500;
-
+const MAX_ITEMS = 1;
 export interface ChatItemRelatedContentProps {
   tabId: string;
   messageId: string;
@@ -46,7 +46,7 @@ export class ChatItemRelatedContent {
       this.render = DomBuilder.getInstance().build({
         type: 'div',
         classNames: [ 'mynah-chat-item-card-related-content',
-          this.props.relatedContent !== undefined && this.props.relatedContent.length < 3 ? 'expanded' : '' ],
+          this.props.relatedContent !== undefined && this.props.relatedContent.length < MAX_ITEMS ? 'expanded' : '' ],
         children: [
           ...(this.props.title !== undefined
             ? [ {

diff --git a/src/styles/components/_chat-wrapper.scss b/src/styles/components/_chat-wrapper.scss
@@ -1,6 +1,12 @@
 .mynah-chat-related-content-preview-wrapper {
     max-width: 80vw;
     max-height: 80vh;
+    >.mynah-chat-related-content-preview-content{
+        padding: var(--mynah-sizing-3);
+        background-color: var(--mynah-card-bg);
+        border: var(--mynah-border-width) solid var(--mynah-color-border-default);
+        border-radius: var(--mynah-card-radius);
+    }
 }
 .mynah-chat-prompt-overlay-buttons-container {
     display: inline-flex;
@@ -241,15 +247,22 @@
                 }
                 &:not(.expanded) {
                     > .mynah-chat-item-card-related-content-item {
-                        &:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(3)) {
+                        $maxItems: 1;
+                        $selector: "&";
+                        // &:not(:nth-of-type(2)):not(:nth-of-type(3)) {
+                        @for $i from 1 through $maxItems {
+                            $selector: #{$selector} + ":not(:nth-of-type(" + #{$i} + "))";
+                        }
+                        #{$selector} {
                             display: none;
                         }
-                        &:nth-of-type(3) {
-                            margin-bottom: calc(-1 * var(--mynah-sizing-3));
+                        &:nth-of-type(#{$maxItems}) {
+                            margin-bottom: calc(-1 * var(--mynah-sizing-6));
                             pointer-events: none;
-                            @include list-fader-bottom();
+                            @include list-fader-bottom(var(--mynah-sizing-12));
+                            -webkit-mask-image: linear-gradient(to top, transparent var(--mynah-sizing-3), black 70%);
                         }
-                        &:nth-of-type(4) {
+                        &:nth-of-type(#{$maxItems + 1}) {
                             & ~ .mynah-chat-item-card-related-content-show-more {
                                 display: flex;
                             }
@@ -265,6 +278,7 @@
                     margin-block-end: 0;
                     align-self: center;
                     height: var(--mynah-sizing-8);
+                    filter: none;
                     > span,
                     > i {
                         overflow: hidden;