New Chat component (#1636)

.changeset/shiny-dolls-shop.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+New Chat component 

src/pages/_data/chat.yml

@@ -0,0 +1,39 @@
+- timestamp: "09:32"
+  person-id: 0
+  message: "Hey guys, I just pushed a new commit on the <code>dev</code> branch. Can you have a look and tell me what you think?"
+- timestamp: "09:34"
+  person-id: 2
+  message: "Sure Paweł, let me pull the latest updates."
+- timestamp: "09:34"
+  person-id: 3
+  message: "I'm on it too 👊"
+- timestamp: "09:40"
+  person-id: 2
+  message: "I see you've refactored the <code>calculateStatistics</code> function. The code is much cleaner now."
+- timestamp: "09:42"
+  person-id: 0
+  message: "Yes, I thought it was getting a bit cluttered."
+- timestamp: "09:43"
+  person-id: 4
+  message: "The commit message is descriptive, too. Good job on mentioning the issue number it fixes."
+- timestamp: "09:44"
+  person-id: 3
+  message: "I noticed you added some new dependencies in the <code>package.json</code>. Did you also update the <code>README</code> with the setup instructions?"
+- timestamp: "09:45"
+  person-id: 0
+  message: "Oops, I forgot. I'll add that right away."
+  gif: "https://media3.giphy.com/media/VABbCpX94WCfS/giphy.gif"
+- timestamp: "09:46"
+  person-id: 2
+  message: "I see a couple of edge cases we might not be handling in the <code>calculateStatistic</code> function. Should I open an issue for that?"
+- timestamp: "09:47"
+  person-id: 0
+  message: "Yes, Bob. Please do. We should not forget to handle those."
+- timestamp: "09:50"
+  person-id: 4
+  message: "Alright, once the <code>README</code> is updated, I'll merge this commit into the main branch. Nice work, Paweł."
+- timestamp: "09:52"
+  person-id: 0
+  message: 'Thanks, <a href="#">@everyone</a>! 🙌'
+- person-id: 4
+  loading: true

src/pages/_includes/ui/chat.html

@@ -0,0 +1,40 @@
+<div class="chat">
+	<div class="chat-bubbles">
+		{% for message in site.data.chat %}
+		{% assign person = site.data.people[message.person-id] %}
+		{% capture chat-avatar %}
+		<div class="col-auto">{% include ui/avatar.html person=person %}</div>
+		{% endcapture %}
+		{% capture chat-message %}
+		<div class="{% if message.loading %}col-auto{% else %}col{% if include.wide %} col-lg-6{% endif %}{% endif %}">
+			<div class="chat-bubble{% if message.person-id == 0 %} chat-bubble-me{% endif %}">
+				{% unless message.loading %}
+				<div class="chat-bubble-title">
+					<div class="row">
+						<div class="col chat-bubble-author">{{ person.full_name }}</div>
+						<div class="col-auto chat-bubble-date">{{ message.timestamp }}</div>
+					</div>
+				</div>
+				{% endunless %}
+				<div class="chat-bubble-body">
+					{% if message.loading %}
+					<p class="text-secondary text-italic">typing<span class="animated-dots"></span></p>
+					{% else %}
+					<p>{{ message.message }}</p>
+					{% endif %}
+
+					{% if message.gif %}
+					<div class="mt-2">
+						<img src="{{ message.gif }}" alt="" class="rounded img-fluid" />
+					</div>
+					{% endif %}
+				</div>
+			</div>
+		</div>
+		{% endcapture %}
+		<div class="chat-item">
+			<div class="row align-items-end{% if message.person-id == 0 %} justify-content-end{% endif %}">{% if message.person-id == 0 %} {{ chat-message }} {{ chat-avatar }} {% else %} {{ chat-avatar }} {{ chat-message }} {% endif %}</div>
+		</div>
+		{% endfor %}
+	</div>
+</div>

src/scss/_core.scss

@@ -61,6 +61,7 @@
 @import "ui/type";
 @import "ui/charts";
 @import "ui/offcanvas";
+@import "ui/chat";
 
 @import "utils/background";
 @import "utils/colors";

src/scss/ui/_cards.scss

@@ -583,4 +583,12 @@ Card list group
     border-bottom-left-radius: var(--#{$prefix}card-border-radius);
     border-top-left-radius: 0;
   }
+}
+
+/**
+Card note
+*/
+.card-note {
+  --#{$prefix}card-bg: #fff7dd;
+  --#{$prefix}card-border-color: #fff1c9;
 }

src/scss/ui/_chat.scss

@@ -0,0 +1,38 @@
+.chat {
+}
+
+.chat-bubbles {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.chat-bubble {
+  background: var(--#{$prefix}bg-surface-secondary);
+  border-radius: var(--#{$prefix}border-radius-lg);
+  padding: 1rem;
+  position: relative;
+}
+
+.chat-bubble-me {
+  background-color: var(--#{$prefix}primary-lt);
+  box-shadow: none;
+}
+
+.chat-bubble-title {
+  margin-bottom: 0.25rem;
+}
+
+.chat-bubble-author {
+  font-weight: 600;
+}
+
+.chat-bubble-date {
+  color: var(--#{$prefix}secondary);
+}
+
+.chat-bubble-body {
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}