@juspay/svelte-ui-components 2.124.0 → 2.125.0

package/dist/ChatMessage/ChatMessage.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import LoadingDots from '../LoadingDots/LoadingDots.svelte';
+  import copySvg from '../assets/copy.svg?raw';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
+  import retrySvg from '../assets/retry.svg?raw';
+  import thumbUpSvg from '../assets/thumb-up.svg?raw';
+  import thumbDownSvg from '../assets/thumb-down.svg?raw';
+  import { partyOf } from '../Chat/roles';
+  import type { ChatMessageProperties } from './properties';
+
+  let {
+    role,
+    content = '',
+    html,
+    streaming = false,
+    status,
+    avatar,
+    header,
+    attachments,
+    allowCopy = false,
+    actions,
+    copyLabel = 'Copy',
+    retryLabel = 'Retry',
+    feedbackUpLabel = 'Good response',
+    feedbackDownLabel = 'Bad response',
+    onretry,
+    onfeedback,
+    oncopy,
+    testId,
+    classes
+  }: ChatMessageProperties = $props();
+
+  let party = $derived(partyOf(role));
+
+  let copied = $state(false);
+  let copyResetTimer: ReturnType<typeof setTimeout> | null = null;
+
+  let hasHtml = $derived(typeof html === 'string' && html.length > 0);
+  let hasContent = $derived(hasHtml || content.length > 0);
+  let showTyping = $derived(streaming && !hasContent);
+  let showRetry = $derived(typeof onretry === 'function');
+  let showFeedback = $derived(typeof onfeedback === 'function');
+  let showActions = $derived(
+    !streaming && (allowCopy || showRetry || showFeedback || typeof actions === 'function')
+  );
+
+  function htmlToText(source: string): string {
+    if (typeof DOMParser === 'undefined') {
+      return source;
+    }
+    return new DOMParser().parseFromString(source, 'text/html').body.textContent ?? '';
+  }
+
+  async function copy(): Promise<void> {
+    const text = content.length > 0 ? content : typeof html === 'string' ? htmlToText(html) : '';
+    if (typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function') {
+      try {
+        await navigator.clipboard.writeText(text);
+        copied = true;
+        if (copyResetTimer !== null) {
+          clearTimeout(copyResetTimer);
+        }
+        copyResetTimer = setTimeout(() => {
+          copied = false;
+        }, 1500);
+      } catch {
+        copied = false;
+      }
+    }
+    oncopy?.(text);
+  }
+</script>
+
+<article
+  class="chat-message party-{party} role-{role} {classes ?? ''}"
+  class:streaming
+  class:error={status === 'error'}
+  aria-label={party === 'sender' ? 'Your message' : 'Message'}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  <div class="row">
+    {#if typeof avatar === 'function'}
+      <div class="avatar">{@render avatar()}</div>
+    {/if}
+
+    <div class="content">
+      {#if typeof header === 'function'}
+        <div class="header">{@render header()}</div>
+      {/if}
+
+      <div class="bubble">
+        {#if hasHtml}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          <div class="body">{@html html}</div>
+        {:else if content.length > 0}
+          <div class="body text">{content}</div>
+        {/if}
+
+        {#if showTyping}
+          <span class="typing"><LoadingDots /></span>
+        {/if}
+      </div>
+
+      {#if typeof attachments === 'function'}
+        <div class="message-attachments">{@render attachments()}</div>
+      {/if}
+
+      {#if showActions}
+        <div class="actions">
+          {#if allowCopy}
+            <div class="action">
+              <Button onclick={copy} ariaLabel={copyLabel}>
+                {#if copied}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html checkmarkSvg}
+                {:else}
+                  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                  {@html copySvg}
+                {/if}
+              </Button>
+            </div>
+          {/if}
+          {#if showRetry}
+            <div class="action">
+              <Button onclick={() => onretry?.()} ariaLabel={retryLabel}>
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html retrySvg}
+              </Button>
+            </div>
+          {/if}
+          {#if showFeedback}
+            <div class="action">
+              <Button onclick={() => onfeedback?.('up')} ariaLabel={feedbackUpLabel}>
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html thumbUpSvg}
+              </Button>
+            </div>
+            <div class="action">
+              <Button onclick={() => onfeedback?.('down')} ariaLabel={feedbackDownLabel}>
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html thumbDownSvg}
+              </Button>
+            </div>
+          {/if}
+          {#if typeof actions === 'function'}
+            {@render actions()}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
+</article>
+
+<style>
+  .chat-message {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    max-width: var(--chat-message-max-width, 82%);
+    margin: var(--chat-message-margin, 0);
+  }
+
+  .chat-message.party-sender {
+    align-self: flex-end;
+    align-items: flex-end;
+  }
+
+  .chat-message.party-responder {
+    align-self: flex-start;
+    align-items: flex-start;
+  }
+
+  .row {
+    display: flex;
+    gap: var(--chat-message-gap, 10px);
+    align-items: flex-end;
+    width: 100%;
+  }
+
+  .chat-message.party-sender .row {
+    flex-direction: row-reverse;
+  }
+
+  .avatar {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-message-content-gap, 6px);
+    min-width: 0;
+  }
+
+  .header {
+    font-size: var(--chat-message-header-font-size, 0.75rem);
+    color: var(--chat-message-header-color, #71717a);
+  }
+
+  .bubble {
+    box-sizing: border-box;
+    padding: var(--chat-message-bubble-padding, 9px 13px);
+    border-radius: var(--chat-message-bubble-border-radius, 16px);
+    font-size: var(--chat-message-font-size, 0.9375rem);
+    line-height: var(--chat-message-line-height, 1.5);
+    color: var(--chat-message-color, #27272a);
+    background: var(--chat-message-background, #f4f4f5);
+    border: var(--chat-message-border, none);
+    box-shadow: var(--chat-message-box-shadow, none);
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  .chat-message.party-sender .bubble {
+    color: var(--chat-message-sender-color, #ffffff);
+    background: var(--chat-message-sender-background, #18181b);
+    border: var(--chat-message-sender-border, none);
+    border-radius: var(
+      --chat-message-sender-border-radius,
+      var(--chat-message-bubble-border-radius, 16px)
+    );
+  }
+
+  .chat-message.party-responder .bubble {
+    color: var(--chat-message-responder-color, var(--chat-message-color, #27272a));
+    background: var(--chat-message-responder-background, transparent);
+    border: var(--chat-message-responder-border, none);
+    padding: var(--chat-message-responder-padding, 2px 0);
+  }
+
+  .chat-message.error .bubble {
+    color: var(--chat-message-error-color, #e0334b);
+  }
+
+  .text {
+    white-space: pre-wrap;
+  }
+
+  .typing {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .message-attachments {
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-message-attachments-gap, 8px);
+    margin: var(--chat-message-attachments-margin, 4px 0 0 0);
+  }
+
+  .message-attachments:empty {
+    display: none;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--chat-message-actions-gap, 2px);
+    opacity: var(--chat-message-actions-opacity, 0);
+    transition: var(--chat-message-actions-transition, opacity 0.15s ease);
+    --button-width: var(--chat-message-action-size, 28px);
+    --button-height: var(--chat-message-action-size, 28px);
+    --button-padding: var(--chat-message-action-padding, 6px);
+    --button-border-radius: var(--chat-message-action-border-radius, 6px);
+    --button-color: var(--chat-message-action-background-color, transparent);
+    --button-text-color: var(--chat-message-action-color, #71717a);
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-message-action-hover-background-color, #f4f4f5);
+  }
+
+  .chat-message:hover .actions,
+  .chat-message:focus-within .actions {
+    opacity: 1;
+  }
+
+  .action {
+    display: flex;
+  }
+
+  .action :global(svg) {
+    height: 100%;
+    width: 100%;
+  }
+
+  @media (hover: none) {
+    .actions {
+      opacity: 1;
+    }
+  }
+
+  .body :global(p) {
+    margin: var(--chat-message-paragraph-margin, 0 0 0.5em 0);
+  }
+
+  .body :global(p:last-child) {
+    margin-bottom: 0;
+  }
+
+  .body :global(a) {
+    color: var(--chat-message-link-color, #6d28d9);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .body :global(code) {
+    font-family: var(--chat-message-code-font-family, ui-monospace, monospace);
+    font-size: 0.88em;
+    background: var(--chat-message-code-background, rgba(0, 0, 0, 0.05));
+    padding: 1px 5px;
+    border-radius: 4px;
+  }
+
+  .body :global(pre) {
+    background: var(--chat-message-pre-background, rgba(0, 0, 0, 0.05));
+    padding: 10px 12px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 0.5em 0;
+  }
+
+  .body :global(pre code) {
+    background: transparent;
+    padding: 0;
+  }
+</style>

package/dist/ChatMessage/ChatMessage.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatMessageProperties } from './properties';
+declare const ChatMessage: import("svelte").Component<ChatMessageProperties, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;

package/dist/ChatMessage/properties.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { ChatMessageStatus, ChatRole } from '../Chat/types';
+export type ChatMessageFeedback = 'up' | 'down';
+export type ChatMessageProperties = OptionalChatMessageProperties & ChatMessageEventProperties & MandatoryChatMessageProperties;
+export type MandatoryChatMessageProperties = {
+    role: ChatRole;
+};
+export type OptionalChatMessageProperties = {
+    content?: string;
+    html?: string;
+    streaming?: boolean;
+    status?: ChatMessageStatus;
+    avatar?: Snippet;
+    header?: Snippet;
+    attachments?: Snippet | null;
+    allowCopy?: boolean;
+    actions?: Snippet;
+    copyLabel?: string;
+    retryLabel?: string;
+    feedbackUpLabel?: string;
+    feedbackDownLabel?: string;
+    testId?: string;
+    classes?: string;
+};
+export type ChatMessageEventProperties = {
+    onretry?: (() => void) | null;
+    onfeedback?: ((value: ChatMessageFeedback) => void) | null;
+    oncopy?: (text: string) => void;
+};

package/dist/ChatMessage/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import ChatMessage from '../ChatMessage/ChatMessage.svelte';
+  import chevronDownSvg from '../assets/chevron-down.svg?raw';
+  import { partyOf } from '../Chat/roles';
+  import type { Action } from 'svelte/action';
+  import type { ChatMessageData } from '../Chat/types';
+  import type { ChatMessageFeedback } from '../ChatMessage/properties';
+  import type { ChatMessageListProperties } from './properties';
+
+  const NEAR_BOTTOM_THRESHOLD = 80;
+
+  let {
+    messages,
+    autoscroll = true,
+    message,
+    messageAttachments,
+    empty,
+    jumpLabel = 'Jump to latest',
+    jumpIcon,
+    allowCopy = false,
+    onretry,
+    onfeedback,
+    testId,
+    classes
+  }: ChatMessageListProperties = $props();
+
+  let listEl: HTMLElement | null = $state(null);
+  let atBottom = $state(true);
+
+  let scrollKey = $derived(`${messages.length}:${messages.at(-1)?.content.length ?? 0}`);
+  let showJump = $derived(!atBottom && messages.length > 0);
+  let lastResponderId = $derived.by(() => {
+    for (let i = messages.length - 1; i >= 0; i -= 1) {
+      const candidate = messages.at(i);
+      if (candidate && partyOf(candidate.role) === 'responder') {
+        return candidate.id;
+      }
+    }
+    return null;
+  });
+
+  function retryFor(msg: ChatMessageData): (() => void) | null {
+    if (
+      typeof onretry === 'function' &&
+      partyOf(msg.role) === 'responder' &&
+      msg.id === lastResponderId
+    ) {
+      return onretry;
+    }
+    return null;
+  }
+
+  function feedbackFor(msg: ChatMessageData): ((value: ChatMessageFeedback) => void) | null {
+    if (typeof onfeedback === 'function' && partyOf(msg.role) === 'responder') {
+      return (value) => onfeedback?.(value, msg);
+    }
+    return null;
+  }
+
+  function isNearBottom(node: HTMLElement): boolean {
+    return node.scrollHeight - node.scrollTop - node.clientHeight < NEAR_BOTTOM_THRESHOLD;
+  }
+
+  function handleScroll(event: Event & { currentTarget: HTMLElement }): void {
+    atBottom = isNearBottom(event.currentTarget);
+  }
+
+  function scrollToBottom(): void {
+    if (listEl !== null) {
+      listEl.scrollTop = listEl.scrollHeight;
+      atBottom = true;
+    }
+  }
+
+  const pinToBottom: Action<HTMLElement, string> = (node) => {
+    let previousCount = messages.length;
+    function scroll(): void {
+      const newMessage = messages.length > previousCount;
+      previousCount = messages.length;
+      if (autoscroll && (atBottom || newMessage)) {
+        queueMicrotask(() => {
+          node.scrollTop = node.scrollHeight;
+        });
+      }
+    }
+    scroll();
+    return { update: scroll };
+  };
+</script>
+
+<div
+  class="chat-message-list {classes ?? ''}"
+  role="log"
+  aria-live="polite"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  bind:this={listEl}
+  onscroll={handleScroll}
+  use:pinToBottom={scrollKey}
+>
+  {#if messages.length === 0 && typeof empty === 'function'}
+    {@render empty()}
+  {/if}
+
+  {#each messages as msg (msg.id)}
+    {#if typeof message === 'function'}
+      {@render message(msg)}
+    {:else}
+      {#snippet attachmentsFor()}
+        {@render messageAttachments?.(msg)}
+      {/snippet}
+      <ChatMessage
+        role={msg.role}
+        content={msg.content}
+        html={msg.html}
+        streaming={msg.streaming}
+        status={msg.status}
+        allowCopy={allowCopy && partyOf(msg.role) === 'responder'}
+        attachments={typeof messageAttachments === 'function' ? attachmentsFor : null}
+        onretry={retryFor(msg)}
+        onfeedback={feedbackFor(msg)}
+      />
+    {/if}
+  {/each}
+
+  {#if showJump}
+    <div class="jump">
+      <Button onclick={scrollToBottom} ariaLabel={jumpLabel}>
+        {#if typeof jumpIcon === 'function'}
+          {@render jumpIcon()}
+        {:else}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html chevronDownSvg}
+        {/if}
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .chat-message-list {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-message-list-gap, 1rem);
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+    padding: var(--chat-message-list-padding, 0.75rem 1.5rem);
+    scroll-behavior: var(--chat-message-list-scroll-behavior, smooth);
+  }
+
+  .jump {
+    position: sticky;
+    bottom: var(--chat-message-list-jump-bottom, 8px);
+    align-self: center;
+    margin-top: var(--chat-message-list-jump-margin-top, 4px);
+    --button-width: var(--chat-message-list-jump-size, 36px);
+    --button-height: var(--chat-message-list-jump-size, 36px);
+    --button-padding: var(--chat-message-list-jump-padding, 8px);
+    --button-border-radius: var(--chat-message-list-jump-border-radius, 50%);
+    --button-color: var(--chat-message-list-jump-background-color, #ffffff);
+    --button-text-color: var(--chat-message-list-jump-color, #52525b);
+    --button-border: var(--chat-message-list-jump-border, 1px solid #e4e4e7);
+    --button-box-shadow: var(--chat-message-list-jump-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-message-list-jump-hover-background-color, #f4f4f5);
+  }
+
+  .jump :global(svg) {
+    height: 100%;
+    width: 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chat-message-list {
+      scroll-behavior: auto;
+    }
+  }
+</style>

package/dist/ChatMessageList/ChatMessageList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatMessageListProperties } from './properties';
+declare const ChatMessageList: import("svelte").Component<ChatMessageListProperties, {}, "">;
+type ChatMessageList = ReturnType<typeof ChatMessageList>;
+export default ChatMessageList;

package/dist/ChatMessageList/properties.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { ChatMessageData } from '../Chat/types';
+import type { ChatMessageFeedback } from '../ChatMessage/properties';
+export type ChatMessageListProperties = OptionalChatMessageListProperties & ChatMessageListEventProperties & MandatoryChatMessageListProperties;
+export type MandatoryChatMessageListProperties = {
+    messages: ChatMessageData[];
+};
+export type OptionalChatMessageListProperties = {
+    autoscroll?: boolean;
+    message?: Snippet<[ChatMessageData]>;
+    messageAttachments?: Snippet<[ChatMessageData]>;
+    empty?: Snippet;
+    jumpLabel?: string;
+    jumpIcon?: Snippet;
+    allowCopy?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type ChatMessageListEventProperties = {
+    onretry?: () => void;
+    onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
+};

package/dist/ChatMessageList/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/ChatSuggestions/ChatSuggestions.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Pill from '../Pill/Pill.svelte';
+  import type { ChatSuggestion, ChatSuggestionsProperties } from './properties';
+
+  let { items, disabled = false, onselect, testId, classes }: ChatSuggestionsProperties = $props();
+
+  function labelOf(item: ChatSuggestion): string {
+    return typeof item === 'string' ? item : item.label;
+  }
+
+  function valueOf(item: ChatSuggestion): string {
+    if (typeof item === 'string') {
+      return item;
+    }
+    return item.value ?? item.label;
+  }
+</script>
+
+<div
+  class="chat-suggestions {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {#each items as item, index (index)}
+    <div class="chip">
+      <Pill text={labelOf(item)} {disabled} onclick={() => onselect?.(valueOf(item), index)} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .chat-suggestions {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: var(--chat-suggestions-flex-wrap, wrap);
+    align-items: center;
+    gap: var(--chat-suggestions-gap, 8px);
+    width: var(--chat-suggestions-width, 100%);
+    padding: var(--chat-suggestions-padding, 0);
+  }
+
+  .chip {
+    display: flex;
+    --pill-cursor: pointer;
+  }
+</style>

package/dist/ChatSuggestions/ChatSuggestions.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChatSuggestionsProperties } from './properties';
+declare const ChatSuggestions: import("svelte").Component<ChatSuggestionsProperties, {}, "">;
+type ChatSuggestions = ReturnType<typeof ChatSuggestions>;
+export default ChatSuggestions;

package/dist/ChatSuggestions/properties.d.ts

@@ -0,0 +1,16 @@
+export type ChatSuggestion = string | {
+    label: string;
+    value?: string;
+};
+export type ChatSuggestionsProperties = OptionalChatSuggestionsProperties & ChatSuggestionsEventProperties & MandatoryChatSuggestionsProperties;
+export type MandatoryChatSuggestionsProperties = {
+    items: ChatSuggestion[];
+};
+export type OptionalChatSuggestionsProperties = {
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type ChatSuggestionsEventProperties = {
+    onselect?: (value: string, index: number) => void;
+};

package/dist/ChatSuggestions/properties.js

@@ -0,0 +1 @@
+export {};