feat(page-chat): new demo (#573)

ui/demo-pwa/src/page-chat.ts

@@ -1,15 +1,76 @@
-import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element';
+import {customElement, AlwatrSmartElement, css, html, map} from '@alwatr/element';
 
 import '@alwatr/ui-kit/chat/chat-avatar.js';
 import '@alwatr/ui-kit/chat/chat-bubble.js';
 import '@alwatr/ui-kit/chat/chat-message.js';
 
+import type {ChatMessage} from '@alwatr/ui-kit/chat/chat-message.js';
+
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-page-chat': AlwatrPageHome;
   }
 }
 
+const me = 'user-1';
+
+const messageList: Array<ChatMessage> = [
+  {
+    from: 'user-1',
+    type: 'text',
+    text: 'سلام',
+  },
+  {
+    from: 'user-2',
+    type: 'text',
+    text: 'با تمام جهل و مستی تصمیم گرفته‌ام دفترچه رزوگار را با پاک کنِ مهر و عطوفت پاک کنم\n' +
+      'و از اول با نام تو روزگار را آغاز کنم.',
+  },
+  {
+    from: 'user-1',
+    type: 'text',
+    text: 'هنوز در نخستین صفحات آن مانده‌ام و مطلبی برای نوشتن ندارم.تا پایان نوشتن انتظارت می‌کشم.',
+  },
+  {
+    from: 'user-4',
+    type: 'text',
+    text: 'دیوانه مسلمانی که در روزهای انتظار هزار بار به دیوانگی‌اش ایمان می‌آورد….',
+  },
+  {
+    from: 'user-1',
+    type: 'text',
+    text: 'کودک که بودم پدرم جمعه ها صبح درب خانه را آب و جارو می کرد تا  اگر مولا از آن حوالی عبور کند …',
+  },
+  {
+    from: 'user-2',
+    type: 'text',
+    text: 'و نو روز هر باره این حس را در من زنده می کند',
+  },
+  {
+    from: 'user-2',
+    type: 'text',
+    text: 'مردمی را می بینم که سراسر شوق و شورند ، خانه تکانی می کنند و لباس های نو برتن…',
+  },
+  {
+    from: 'user-2',
+    type: 'text',
+    text: 'اما برای چه ؟ برای که ؟\nاینان منتظرند تا  بهار شود ؟',
+  },
+  {
+    from: 'user-4',
+    type: 'text',
+    text: 'سالهاست می اندیشم که هنگام بهار مگر چه می شود که اینگونه به هم می ریزیم' +
+      '،مهربان می شویم، به سراغ هم می رویم و از همه مهمتر منتظر می شویم…',
+  },
+  {
+    from: 'user-4',
+    type: 'text',
+    text: 'انتظار...',
+  },
+];
+
+const messageListShort = messageList.splice(0, 5);
+
 /**
  * Alwatr Demo Home Page
  */
@@ -34,9 +95,18 @@ export class AlwatrPageHome extends AlwatrSmartElement {
       display: block;
       margin-bottom: 1rem;
     }
+
+    alwatr-chat-message {
+      margin: 1rem 0;
+    }
+
+    alwatr-chat-list {
+      min-height: 25rem;
+    }
   `;
 
   override render(): unknown {
+    super.render();
     return html`
       text on surface
 
@@ -46,34 +116,24 @@ export class AlwatrPageHome extends AlwatrSmartElement {
 
       <p>
         <span class="section-name">alwatr-chat-avatar</span>
-        <alwatr-chat-avatar .user=${'1'}></alwatr-chat-avatar>
-        <alwatr-chat-avatar .user=${'2'}></alwatr-chat-avatar>
-        <alwatr-chat-avatar .user=${'3'}></alwatr-chat-avatar>
+        ${map(messageListShort, (message) => html`<alwatr-chat-avatar .user=${message.from}></alwatr-chat-avatar>`)}
       </p>
 
       <p>
         <span class="section-name">alwatr-chat-bubble</span>
-        <alwatr-chat-bubble .message=${'سلام'}></alwatr-chat-bubble>
-        <alwatr-chat-bubble .message=${'چطوری؟'} end-side></alwatr-chat-bubble>
-        <br/><br/>
-        <alwatr-chat-bubble
-          .message=${'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
-          ' Veritatis quia nemo eaque laboriosam unde consequatur!'}
-        ></alwatr-chat-bubble>
+        ${map(messageListShort, (message) => html`
+          <alwatr-chat-bubble .text=${message.text} ?end-side=${message.from !== me}></alwatr-chat-bubble>
+        `)}
       </p>
 
       <p>
         <span class="section-name">alwatr-chat-message</span>
-        <alwatr-chat-message .user=${'1'} .message=${'سلام'}></alwatr-chat-message>
-        <br/>
-        <alwatr-chat-message .user=${'2'} .message=${'چطوری؟'} end-side></alwatr-chat-message>
-        <br/>
-        <alwatr-chat-message
-          .user=${'3'}
-          .message=${'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
-          ' Veritatis quia nemo eaque laboriosam unde consequatur!'}
-        ></alwatr-chat-message>
+        ${map(messageListShort, (message) => html`
+          <alwatr-chat-message .message=${message} ?end-side=${message.from !== me}></alwatr-chat-message>
+        `)}
       </p>
+
+      <alwatr-chat-list .list=${messageList}></alwatr-chat-list>
     `;
   }
 }

ui/element/src/root.ts

@@ -44,16 +44,16 @@ export class AlwatrRootElement extends LoggerMixin(LitElement) {
   }
 
   protected _initRouter(): void {
-    // l10n.config.defaultLocale = {
-    //   code: 'fa-IR',
-    //   direction: 'rtl',
-    //   language: 'fa',
-    // };
     l10n.config.defaultLocale = {
-      code: 'en-US',
-      direction: 'ltr',
-      language: 'en',
+      code: 'fa-IR',
+      direction: 'rtl',
+      language: 'fa',
     };
+    // l10n.config.defaultLocale = {
+    //   code: 'en-US',
+    //   direction: 'ltr',
+    //   language: 'en',
+    // };
     l10n.setLocal();
 
     router.signal.addListener((route) => {

ui/ui-kit/src/chat/chat-avatar.ts

@@ -35,6 +35,7 @@ export class AlwatrChatAvatar extends AlwatrDummyElement {
     user?: string;
 
   override render(): unknown {
+    super.render();
     return html`<img src="https://i.pravatar.cc/40?u=${this.user}" alt="User ${this.user} profile image" />`;
   }
 }

ui/ui-kit/src/chat/chat-bubble.ts

@@ -1,4 +1,4 @@
-import {AlwatrDummyElement, css, html, customElement, property, ifDefined, PropertyValues} from '@alwatr/element';
+import {AlwatrDummyElement, css, html, customElement, property, PropertyValues} from '@alwatr/element';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,6 +20,7 @@ export class AlwatrChatBubble extends AlwatrDummyElement {
       padding: 0.8rem 1.4rem;
       color: var(--md-sys-color-on-surface);
       background-color: var(--md-sys-color-surface);
+      white-space: pre-line;
     }
 
     :host,
@@ -36,7 +37,7 @@ export class AlwatrChatBubble extends AlwatrDummyElement {
   `;
 
   @property()
-    message?: string;
+    text?: string;
 
   @property({type: Boolean, attribute: 'end-side', reflect: true})
     endSide = false;
@@ -47,6 +48,7 @@ export class AlwatrChatBubble extends AlwatrDummyElement {
   }
 
   override render(): unknown {
-    return html`${ifDefined(this.message)}`;
+    super.render();
+    return html`${this.text ?? '...'}`;
   }
 }

ui/ui-kit/src/chat/chat-message.ts

@@ -1,4 +1,4 @@
-import {AlwatrDummyElement, css, customElement, html, property} from '@alwatr/element';
+import {AlwatrDummyElement, css, customElement, html, nothing, property} from '@alwatr/element';
 import './chat-avatar.js';
 import './chat-bubble.js';
 
@@ -8,6 +8,14 @@ declare global {
   }
 }
 
+export type ChatTextMessage = {
+  from: string,
+  type: 'text',
+  text: string,
+};
+
+export type ChatMessage = ChatTextMessage; // TODO: ChatPhotoMessage
+
 /**
  * Alwatr chat message box element.
  *
@@ -33,19 +41,18 @@ export class AlwatrChatMessage extends AlwatrDummyElement {
     }
   `;
 
-  @property()
-    user?: string;
-
-  @property()
-    message?: string;
+  @property({type: Object, attribute: false})
+    message?: ChatTextMessage;
 
   @property({type: Boolean, attribute: 'end-side', reflect: true})
     endSide = false;
 
   override render(): unknown {
+    super.render();
+    if (this.message == null) return nothing;
     return html`
-      <alwatr-chat-avatar .user=${this.user}></alwatr-chat-avatar>
-      <alwatr-chat-bubble .message=${this.message} .endSide=${this.endSide}></alwatr-chat-bubble>
+      <alwatr-chat-avatar .user=${this.message.from}></alwatr-chat-avatar>
+      <alwatr-chat-bubble .text=${this.message.text} .endSide=${this.endSide}></alwatr-chat-bubble>
     `;
   }
 }