@salla.sa/ui-ai-kit-core 1.0.0 → 1.1.1

package/dist/collection/components/ai-chat-message/ai-chat-message.css

@@ -1,22 +1,17 @@
 /* ─── Custom Properties ──────────────────────────────────────────────────── */
 :host {
-  --ai-msg-user-bg: var(--ai-user-bubble-bg, #F4F4F4);
-  --ai-msg-user-color: var(--ai-text-primary, #333333);
-  --ai-msg-user-border: 1px solid var(--ai-border-default, #eee);
-  --ai-msg-agent-bg: var(--ai-agent-bubble-bg, #ffffff);
-  --ai-msg-agent-color: var(--ai-text-primary, #333333);
-  --ai-msg-agent-border: 1px solid var(--ai-border-default, #eee);
+  --ai-msg-user-bg: var(--ai-user-bubble-bg);
+  --ai-msg-user-border: 1px solid var(--ai-border-default);
+  --ai-msg-agent-bg: var(--ai-agent-bubble-bg);
+  --ai-msg-agent-border: 1px solid var(--ai-border-default);
   --ai-msg-border-radius: 16px;
   --ai-msg-padding: 16px;
   --ai-msg-font-size: 14px;
-  --ai-msg-action-active-bg: var(--ai-accent, #a4ffe5);
-  --ai-msg-timestamp-color: var(--ai-text-secondary, #737373);
+  --ai-msg-action-active-bg: var(--ai-accent);
   --ai-user-msg-max-width: 80%;
   --ai-agent-msg-max-width: 80%;
 
   display: block;
-  direction: rtl;
-  font-family: var(--ai-font-family, "PingARLT", sans-serif);
 }
 
 /* ─── Message Row ────────────────────────────────────────────────────────── */
@@ -33,7 +28,7 @@
 
 .user-bubble {
   background: var(--ai-msg-user-bg);
-  color: var(--ai-msg-user-color);
+  color: var(--ai-text-primary);
   border: var(--ai-msg-user-border);
   border-radius: var(--ai-msg-border-radius);
   padding: var(--ai-msg-padding);
@@ -41,12 +36,12 @@
   max-width: var(--ai-user-msg-max-width);
   line-height: 1.5;
   word-break: break-word;
-  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
+  box-shadow: var(--ai-shadow-sm);
 }
 
 .user-row .timestamp {
   font-size: 12px;
-  color: var(--ai-msg-timestamp-color);
+  color: var(--ai-text-secondary);
   margin-top: 4px;
 }
 
@@ -68,14 +63,14 @@
 
 .agent-bubble {
   background: var(--ai-msg-agent-bg);
-  color: var(--ai-msg-agent-color);
+  color: var(--ai-text-primary);
   border: var(--ai-msg-agent-border);
   border-radius: var(--ai-msg-border-radius);
   padding: var(--ai-msg-padding);
   font-size: var(--ai-msg-font-size);
   line-height: 1.6;
   word-break: break-word;
-  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
+  box-shadow: var(--ai-shadow-sm);
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -115,16 +110,16 @@
 }
 
 .message-content code {
-  background: var(--ai-bg-surface, #f3f4f6);
+  background: var(--ai-bg-surface);
   border-radius: 4px;
   padding: 1px 5px;
-  font-family: monospace;
+  font-family: var(--ai-font-family-mono);
   font-size: 13px;
-  color: var(--ai-text-primary, #374151);
+  color: var(--ai-text-primary);
 }
 
 .message-content pre {
-  background: var(--ai-bg-surface, #f3f4f6);
+  background: var(--ai-bg-surface);
   border-radius: 8px;
   padding: 10px 12px;
   overflow-x: auto;
@@ -174,17 +169,17 @@
   width: 32px;
   height: 32px;
   border-radius: 8px;
-  background: var(--ai-bg-card, #ffffff);
-  border: 1px solid var(--ai-border-default, #eee);
+  background: var(--ai-bg-card);
+  border: 1px solid var(--ai-border-default);
   cursor: pointer;
-  color: var(--ai-text-primary, #333333);
+  color: var(--ai-text-primary);
   transition: background 0.15s, color 0.15s;
   padding: 0;
   flex-shrink: 0;
 }
 
 .action-btn:hover {
-  background: var(--ai-bg-surface, #f3f4f6);
+  background: var(--ai-bg-surface);
 }
 
 .action-btn.copy-success {
@@ -193,14 +188,13 @@
   border-color: var(--ai-accent);
 }
 
-
 .feedback-group {
   display: flex;
   align-items: center;
-  border: 1px solid var(--ai-border-default, #eee);
+  border: 1px solid var(--ai-border-default);
   border-radius: 8px;
   overflow: hidden;
-  background: var(--ai-bg-card, #ffffff);
+  background: var(--ai-bg-card);
 }
 
 .feedback-btn {
@@ -209,11 +203,11 @@
   justify-content: center;
   height: 32px;
   padding: 0 8px;
-  background: var(--ai-bg-card, #ffffff);
+  background: var(--ai-bg-card);
   border: none;
-  border-inline-start: 1px solid var(--ai-border-default, #eee);
+  border-inline-start: 1px solid var(--ai-border-default);
   cursor: pointer;
-  color: var(--ai-text-primary, #333333);
+  color: var(--ai-text-primary);
   transition: background 0.15s, color 0.15s;
 }
 
@@ -222,7 +216,7 @@
 }
 
 .feedback-btn:hover {
-  background: var(--ai-bg-surface, #f3f4f6);
+  background: var(--ai-bg-surface);
 }
 
 .feedback-btn.active {
@@ -244,7 +238,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
-  color: var(--ai-text-muted, #9ca3af);
+  color: var(--ai-text-muted);
 }
 
 .agent-info-name,
@@ -275,16 +269,26 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--ai-text-muted, #9ca3af);
+  background: var(--ai-text-muted);
   animation: typingBounce 1.2s ease-in-out infinite;
 }
 
-.typing-dot:nth-child(2) { animation-delay: 0.2s; }
-.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+.typing-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.typing-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
 
 @keyframes typingBounce {
-  0%, 60%, 100% { transform: translateY(0); }
-  30%            { transform: translateY(-6px); }
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-6px);
+  }
 }
 
 /* ─── Streaming Cursor ───────────────────────────────────────────────────── */
@@ -299,6 +303,11 @@
 }
 
 @keyframes cursorBlink {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
 }

package/dist/collection/components/ai-chat-message/ai-chat-message.js

@@ -1,5 +1,10 @@
 import { Host, h } from "@stencil/core";
 import { iconRegistry } from "../../utils/icon-registry";
+import DOMPurify from "dompurify";
+const SANITIZE_CONFIG = {
+    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'del', 'code', 'pre', 'ul', 'ol', 'li', 'h2', 'h3', 'a', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'th', 'td'],
+    ALLOWED_ATTR: ['href', 'target', 'rel'],
+};
 export class AiChatMessage {
     role = 'user';
     content = '';
@@ -28,16 +33,59 @@ export class AiChatMessage {
     parseMarkdown(text) {
         let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
         const blocks = [];
+        // Fenced code blocks
         html = html.replace(/```(?:\w+)?\n?([\s\S]*?)```/g, (_, code) => {
             const idx = blocks.length;
             blocks.push(`<pre><code>${code}</code></pre>`);
             return `\x00BLOCK${idx}\x00`;
         });
+        // Pipe tables (must run before paragraph wrapping)
+        html = html.replace(/((?:^[ \t]*\|.+\|\n?)+)/gm, match => {
+            const rows = match.trim().split('\n').filter(l => l.trim());
+            if (rows.length < 2)
+                return match;
+            const isSep = (r) => /^[\s|:-]+$/.test(r);
+            let tableHtml = '<table>';
+            let inBody = false;
+            rows.forEach((row, i) => {
+                if (isSep(row)) {
+                    inBody = true;
+                    tableHtml += '<tbody>';
+                    return;
+                }
+                const cells = row.split('|').filter((_, j, a) => j > 0 && j < a.length - 1);
+                if (!inBody && i === 0) {
+                    tableHtml += `<thead><tr>${cells.map(c => `<th>${c.trim()}</th>`).join('')}</tr></thead>`;
+                }
+                else {
+                    tableHtml += `<tr>${cells.map(c => `<td>${c.trim()}</td>`).join('')}</tr>`;
+                }
+            });
+            if (inBody)
+                tableHtml += '</tbody>';
+            tableHtml += '</table>';
+            const idx = blocks.length;
+            blocks.push(tableHtml);
+            return `\x00BLOCK${idx}\x00`;
+        });
+        // Blockquotes — &gt; because > was already escaped
+        html = html.replace(/((?:^&gt; .+\n?)+)/gm, match => {
+            const content = match.replace(/^&gt; /gm, '').trim();
+            const idx = blocks.length;
+            blocks.push(`<blockquote>${content}</blockquote>`);
+            return `\x00BLOCK${idx}\x00`;
+        });
+        // Inline code
         html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+        // Headings
         html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
         html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+        // Bold, italic, strikethrough, links
         html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
         html = html.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+        html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        // Unordered lists
         html = html.replace(/((?:^[ \t]*[-*] .+\n?)+)/gm, match => {
             const items = match
                 .trim()
@@ -45,11 +93,11 @@ export class AiChatMessage {
                 .filter(l => l.trim())
                 .map(l => `<li>${l.replace(/^[ \t]*[-*] /, '')}</li>`)
                 .join('');
-            return `\x00BLOCK${blocks.length}\x00${(() => {
-                blocks.push(`<ul>${items}</ul>`);
-                return '';
-            })()}`;
+            const idx = blocks.length;
+            blocks.push(`<ul>${items}</ul>`);
+            return `\x00BLOCK${idx}\x00`;
         });
+        // Ordered lists
         html = html.replace(/((?:^[ \t]*\d+\. .+\n?)+)/gm, match => {
             const items = match
                 .trim()
@@ -57,10 +105,9 @@ export class AiChatMessage {
                 .filter(l => l.trim())
                 .map(l => `<li>${l.replace(/^[ \t]*\d+\. /, '')}</li>`)
                 .join('');
-            return `\x00BLOCK${blocks.length}\x00${(() => {
-                blocks.push(`<ol>${items}</ol>`);
-                return '';
-            })()}`;
+            const idx = blocks.length;
+            blocks.push(`<ol>${items}</ol>`);
+            return `\x00BLOCK${idx}\x00`;
         });
         html = html
             .split(/\n{2,}/)
@@ -79,8 +126,7 @@ export class AiChatMessage {
     getRenderedContent() {
         if (!this.content)
             return '';
-        let html = this.parseMarkdown(this.content);
-        return html;
+        return DOMPurify.sanitize(this.parseMarkdown(this.content), SANITIZE_CONFIG);
     }
     getRelativeTime() {
         if (!this.timestamp)
@@ -89,15 +135,19 @@ export class AiChatMessage {
             const date = new Date(this.timestamp);
             if (isNaN(date.getTime()))
                 return this.timestamp;
-            const diffMin = Math.floor((Date.now() - date.getTime()) / 60000);
+            const diffMs = Date.now() - date.getTime();
+            const diffMin = Math.floor(diffMs / 60000);
+            const diffHour = Math.floor(diffMin / 60);
+            const diffDay = Math.floor(diffHour / 24);
+            const lang = (typeof document !== 'undefined' && document.documentElement.lang) || 'ar';
+            const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
             if (diffMin < 1)
-                return 'الآن';
+                return rtf.format(0, 'second');
             if (diffMin < 60)
-                return `منذ ${diffMin} دقيقة`;
-            const hours = Math.floor(diffMin / 60);
-            if (hours < 24)
-                return `منذ ${hours} ساعة`;
-            return `منذ ${Math.floor(hours / 24)} يوم`;
+                return rtf.format(-diffMin, 'minute');
+            if (diffHour < 24)
+                return rtf.format(-diffHour, 'hour');
+            return rtf.format(-diffDay, 'day');
         }
         catch {
             return this.timestamp;
@@ -145,7 +195,7 @@ export class AiChatMessage {
             } })), h("slot", null), showActions && this.renderActionsBar()), (this.agentName || this.timestamp) && (h("div", { class: "agent-info" }, this.agentName && h("span", { class: "agent-info-name" }, this.agentName), this.agentName && this.timestamp && this.renderIcon('eclipse', 10), this.timestamp && h("span", { class: "agent-info-time" }, this.getRelativeTime()))))));
     }
     render() {
-        return h(Host, { key: '77dd0c46a676c211fdfba283d51bd0e0d2594b24' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
+        return h(Host, { key: 'a3da55a7f023469f2538b363ff691674c241227e' }, this.role === 'user' ? this.renderUserMessage() : this.renderAgentMessage());
     }
     static get is() { return "ai-chat-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ai-conversation-list/ai-conversation-list.css

@@ -0,0 +1,196 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.conversation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  background: var(--ai-bg-surface);
+}
+
+/* ── Scrollable list ───────────────────────────────────── */
+
+.list-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px 12px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ai-scrollbar-thumb) var(--ai-scrollbar-track);
+}
+
+.list-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.list-scroll::-webkit-scrollbar-track {
+  background: var(--ai-scrollbar-track);
+}
+
+.list-scroll::-webkit-scrollbar-thumb {
+  background: var(--ai-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+/* ── Conversation item ─────────────────────────────────── */
+
+.conv-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin-top: 6px;
+  padding: 10px 10px 10px 6px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.15s;
+  position: relative;
+}
+
+.conv-item:hover {
+  background: var(--ai-bg-card);
+}
+
+.conv-item--active {
+  background: var(--ai-bg-card);
+  box-shadow: var(--ai-shadow-sm);
+}
+
+.conv-item__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.conv-item__title {
+  margin: 0 0 3px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ai-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.conv-item__preview {
+  margin: 0 0 5px;
+  font-size: 12px;
+  color: var(--ai-text-muted);
+  line-height: 1.45;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.conv-item__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.conv-item__time {
+  font-size: 11px;
+  color: var(--ai-text-muted);
+  flex-shrink: 0;
+}
+
+/* ── Rating dots ───────────────────────────────────────── */
+
+.rating-dots {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.rating-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ai-border-default);
+  transition: background 0.15s;
+}
+
+.rating-dot--filled {
+  background: var(--ai-accent-warning, #ffaf44);
+}
+
+/* ── Delete button ─────────────────────────────────────── */
+
+.delete-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--ai-text-muted);
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+  margin-block-start: 2px;
+}
+
+.conv-item:hover .delete-btn,
+.conv-item--active .delete-btn {
+  opacity: 1;
+}
+
+.delete-btn:hover {
+  background: var(--ai-status-danger-bg, rgba(239, 68, 68, 0.1));
+  color: var(--ai-status-danger, #ef4444);
+}
+
+.delete-btn .icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+
+/* ── Skeleton loading ──────────────────────────────────── */
+
+.skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.skeleton-item {
+  padding: 10px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skeleton-line {
+  border-radius: 6px;
+  background: var(--ai-shimmer-gradient);
+  background-size: 200% 100%;
+  animation: shimmer 2s linear infinite;
+  height: 12px;
+}
+
+.skeleton-line--title {
+  width: 65%;
+  height: 13px;
+}
+
+.skeleton-line--preview {
+  width: 100%;
+}
+
+.skeleton-line--meta {
+  width: 35%;
+  height: 10px;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}