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

package/dist/collection/components/ai-chat-header/ai-chat-header.stories.js

@@ -0,0 +1,138 @@
+import { html } from "lit";
+const meta = {
+    title: 'Chat/Chat Header',
+    component: 'ai-chat-header',
+    tags: ['autodocs'],
+    argTypes: {
+        mode: {
+            control: { type: 'select' },
+            options: ['agent', 'human'],
+            description: 'Layout variant',
+        },
+        conversation: {
+            control: 'text',
+            description: 'Conversation title (agent mode)',
+        },
+        agentName: {
+            control: 'text',
+            description: 'Human agent name (human mode)',
+        },
+        agentStatus: {
+            control: 'text',
+            description: 'Human agent status (human mode)',
+        },
+        agentAvatar: {
+            control: 'text',
+            description: 'Human agent avatar URL (human mode)',
+        },
+        showBack: {
+            control: 'boolean',
+            description: 'Show back button (human mode)',
+        },
+        isDraggable: {
+            control: 'boolean',
+            description: 'Show drag handle (used when container is draggable)',
+        },
+    },
+};
+export default meta;
+export const AgentMode = {
+    render: args => html `
+    <ai-chat-header
+      mode="${args.mode}"
+      conversation="${args.conversation}"
+      ?isDraggable="${args.isDraggable}"
+      @closeClick="${() => console.log('Close clicked')}"
+      @editClick="${() => console.log('Edit clicked')}"
+      @dropdownClick="${() => console.log('Dropdown clicked')}"
+    ></ai-chat-header>
+  `,
+    args: {
+        mode: 'agent',
+        conversation: 'محادثة جديدة',
+        isDraggable: true,
+    },
+};
+export const HumanMode = {
+    render: args => html `
+    <ai-chat-header
+      mode="${args.mode}"
+      agent-name="${args.agentName}"
+      agent-status="${args.agentStatus}"
+      agent-avatar="${args.agentAvatar}"
+      ?show-back="${args.showBack}"
+      ?draggable="${args.draggable}"
+      @closeClick="${() => console.log('Close clicked')}"
+      @moreClick="${() => console.log('More clicked')}"
+      @backClick="${() => console.log('Back clicked')}"
+    ></ai-chat-header>
+  `,
+    args: {
+        mode: 'human',
+        agentName: 'هلا',
+        agentStatus: 'Active',
+        agentAvatar: 'https://i.pravatar.cc/40?img=5',
+        showBack: true,
+        draggable: true,
+    },
+};
+export const HumanWithoutBack = {
+    render: args => html `
+    <ai-chat-header
+      mode="${args.mode}"
+      agent-name="${args.agentName}"
+      agent-status="${args.agentStatus}"
+      agent-avatar="${args.agentAvatar}"
+      ?show-back="${args.showBack}"
+      ?isDraggable="${args.isDraggable}"
+      @closeClick="${() => console.log('Close clicked')}"
+      @moreClick="${() => console.log('More clicked')}"
+    ></ai-chat-header>
+  `,
+    args: {
+        mode: 'human',
+        agentName: 'هلا',
+        agentStatus: 'Active',
+        agentAvatar: 'https://i.pravatar.cc/40?img=5',
+        showBack: false,
+        isDraggable: true,
+    },
+};
+export const InChatContainer = {
+    render: () => html `
+    <div style="position: relative; height: 600px; background: #f3f4f6;">
+      <ai-chat-container is-open position="right" width="32rem">
+        <div style="display: flex; flex-direction: column; height: 100%; background: white;">
+          <ai-chat-header
+            mode="agent"
+            title="محادثة مع المساعد الذكي"
+            @closeClick="${() => console.log('Close clicked')}"
+            @editClick="${() => console.log('Edit clicked')}"
+            @dropdownClick="${() => console.log('Dropdown clicked')}"
+          ></ai-chat-header>
+
+          <div style="flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto;">
+            <ai-chat-message
+              role="user"
+              content="مرحباً، كيف يمكنني المساعدة؟"
+              timestamp="${new Date(Date.now() - 300000).toISOString()}"
+              language="ar"
+            ></ai-chat-message>
+
+            <ai-chat-message
+              role="assistant"
+              content="مرحباً بك! أنا هنا لمساعدتك. ما الذي تحتاج إليه اليوم؟"
+              timestamp="${new Date().toISOString()}"
+              language="ar"
+              show-actions
+            ></ai-chat-message>
+          </div>
+
+          <div style="padding: 1rem; border-top: 1px solid #e5e7eb;">
+            <ai-message-input placeholder="اكتب رسالتك..." language="ar"></ai-message-input>
+          </div>
+        </div>
+      </ai-chat-container>
+    </div>
+  `,
+};

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

@@ -0,0 +1,304 @@
+/* ─── 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-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-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 ────────────────────────────────────────────────────────── */
+.message-row {
+  display: flex;
+}
+
+/* ─── User Message — aligned LEFT ───────────────────────────────────────── */
+/* In RTL, flex-end = visual left */
+.user-row {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.user-bubble {
+  background: var(--ai-msg-user-bg);
+  color: var(--ai-msg-user-color);
+  border: var(--ai-msg-user-border);
+  border-radius: var(--ai-msg-border-radius);
+  padding: var(--ai-msg-padding);
+  font-size: var(--ai-msg-font-size);
+  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);
+}
+
+.user-row .timestamp {
+  font-size: 12px;
+  color: var(--ai-msg-timestamp-color);
+  margin-top: 4px;
+}
+
+/* ─── Agent Message — aligned RIGHT ─────────────────────────────────────── */
+/* In RTL, flex-start = visual right */
+.agent-row {
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.agent-bubble-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  max-width: var(--ai-msg-agent-max-width);
+  min-width: 0;
+}
+
+.agent-bubble {
+  background: var(--ai-msg-agent-bg);
+  color: var(--ai-msg-agent-color);
+  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);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ─── Message Content ────────────────────────────────────────────────────── */
+.message-content {
+  white-space: pre-wrap;
+}
+
+.message-content p {
+  margin: 0 0 8px 0;
+}
+
+.message-content p:last-child {
+  margin-bottom: 0;
+}
+
+.message-content h2 {
+  font-size: 16px;
+  font-weight: 700;
+  margin: 0 0 8px 0;
+}
+
+.message-content h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0 0 6px 0;
+}
+
+.message-content strong {
+  font-weight: 700;
+}
+
+.message-content em {
+  font-style: italic;
+}
+
+.message-content code {
+  background: var(--ai-bg-surface, #f3f4f6);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--ai-text-primary, #374151);
+}
+
+.message-content pre {
+  background: var(--ai-bg-surface, #f3f4f6);
+  border-radius: 8px;
+  padding: 10px 12px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.message-content pre code {
+  background: none;
+  padding: 0;
+  font-size: 13px;
+}
+
+.message-content ul,
+.message-content ol {
+  padding-inline-start: 20px;
+  margin: 4px 0 8px 0;
+}
+
+.message-content li {
+  margin-bottom: 3px;
+}
+
+/* ─── Actions Bar (inside bubble, shown on hover) ────────────────────────── */
+.actions-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: height 0.15s ease, opacity 0.15s ease;
+}
+
+.agent-bubble:hover .actions-bar {
+  height: 32px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--ai-bg-card, #ffffff);
+  border: 1px solid var(--ai-border-default, #eee);
+  cursor: pointer;
+  color: var(--ai-text-primary, #333333);
+  transition: background 0.15s, color 0.15s;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.action-btn:hover {
+  background: var(--ai-bg-surface, #f3f4f6);
+}
+
+.action-btn.copy-success {
+  background: var(--ai-msg-action-active-bg);
+  color: var(--ai-accent-text);
+  border-color: var(--ai-accent);
+}
+
+
+.feedback-group {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--ai-border-default, #eee);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--ai-bg-card, #ffffff);
+}
+
+.feedback-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 8px;
+  background: var(--ai-bg-card, #ffffff);
+  border: none;
+  border-inline-start: 1px solid var(--ai-border-default, #eee);
+  cursor: pointer;
+  color: var(--ai-text-primary, #333333);
+  transition: background 0.15s, color 0.15s;
+}
+
+.feedback-btn:first-child {
+  border-inline-start: none;
+}
+
+.feedback-btn:hover {
+  background: var(--ai-bg-surface, #f3f4f6);
+}
+
+.feedback-btn.active {
+  background: var(--ai-msg-action-active-bg);
+  color: var(--ai-accent-text);
+}
+
+.icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/* ─── Agent Info Bar (below bubble) ─────────────────────────────────────── */
+.agent-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  color: var(--ai-text-muted, #9ca3af);
+}
+
+.agent-info-name,
+.agent-info-time {
+  font-size: 12px;
+  color: inherit;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.agent-info .icon-wrap {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+/* ─── Typing Indicator ───────────────────────────────────────────────────── */
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 2px;
+}
+
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ai-text-muted, #9ca3af);
+  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; }
+
+@keyframes typingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30%            { transform: translateY(-6px); }
+}
+
+/* ─── Streaming Cursor ───────────────────────────────────────────────────── */
+.streaming-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: currentColor;
+  vertical-align: text-bottom;
+  margin-inline-start: 2px;
+  animation: cursorBlink 0.8s step-start infinite;
+}
+
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}