@juspay/svelte-ui-components 2.126.0 → 2.127.0

package/dist/AttachmentChipRow/AttachmentChipRow.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
+  import Scroller from '../Scroller/Scroller.svelte';
+  import { tooltip } from '../Tooltip/tooltip-action';
+  import type { AttachmentChipRowProperties } from './properties';
+
+  /**
+   * The pending-attachment strip above a chat composer: image thumbnails, video
+   * poster tiles (with a play badge) and file tiles, each with a floating remove
+   * button, scrolling horizontally when they overflow. Renders NOTHING while
+   * there are no attachments.
+   */
+  let {
+    images = [],
+    files = [],
+    videos = [],
+    onRemoveImage,
+    onRemoveFile,
+    onRemoveVideo,
+    onOpenImage,
+    onOpenVideo,
+    onOpenFile,
+    imageTooltip,
+    videoTooltip,
+    removeIcon,
+    fileIcon,
+    testId,
+    classes
+  }: AttachmentChipRowProperties = $props();
+</script>
+
+{#if images.length > 0 || videos.length > 0 || files.length > 0}
+  <Scroller
+    direction="horizontal"
+    showArrows={false}
+    hideScrollbar={false}
+    showGradient={false}
+    classes={`attachment-chip-row ${classes ?? ''}`}
+    {testId}
+  >
+    {#each images as image (image.id)}
+      <div
+        class="chip"
+        data-pw={typeof testId === 'string' ? `${testId}-image-${image.id}` : null}
+        testID={typeof testId === 'string' ? `${testId}-image-${image.id}` : null}
+      >
+        <svelte:element
+          this={typeof onOpenImage === 'function' ? 'button' : 'div'}
+          type={typeof onOpenImage === 'function' ? 'button' : null}
+          role={typeof onOpenImage === 'function' ? 'button' : null}
+          aria-label={typeof onOpenImage === 'function'
+            ? `Open ${image.filename ?? 'image'}`
+            : null}
+          class="thumb"
+          class:openable={typeof onOpenImage === 'function'}
+          onclick={typeof onOpenImage === 'function' ? () => onOpenImage(image) : null}
+          use:tooltip={{
+            text: typeof imageTooltip === 'function' ? imageTooltip(image) : '',
+            position: 'top'
+          }}
+        >
+          <Img src={image.thumbnailData} alt={image.filename ?? 'Uploaded image'} fallback="" />
+        </svelte:element>
+        {#if typeof onRemoveImage === 'function'}
+          <div class="remove-wrap">
+            <Button
+              variant="secondary"
+              iconOnly={true}
+              ariaLabel="Remove image"
+              testId={testId && `${testId}-remove-image-${image.id}`}
+              onclick={() => onRemoveImage(image.id)}
+            >
+              {#snippet icon()}
+                {#if removeIcon}
+                  {@render removeIcon()}
+                {:else}
+                  <svg class="cross" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <path
+                      d="M4 4l8 8m0-8l-8 8"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                {/if}
+              {/snippet}
+            </Button>
+          </div>
+        {/if}
+      </div>
+    {/each}
+    {#each videos as video (video.id)}
+      <div
+        class="chip"
+        data-pw={typeof testId === 'string' ? `${testId}-video-${video.id}` : null}
+        testID={typeof testId === 'string' ? `${testId}-video-${video.id}` : null}
+      >
+        <svelte:element
+          this={typeof onOpenVideo === 'function' ? 'button' : 'div'}
+          type={typeof onOpenVideo === 'function' ? 'button' : null}
+          role={typeof onOpenVideo === 'function' ? 'button' : null}
+          aria-label={typeof onOpenVideo === 'function'
+            ? `Play ${video.filename ?? 'video'}`
+            : null}
+          class="thumb video-tile"
+          class:openable={typeof onOpenVideo === 'function'}
+          onclick={typeof onOpenVideo === 'function' ? () => onOpenVideo(video) : null}
+          use:tooltip={{
+            text: typeof videoTooltip === 'function' ? videoTooltip(video) : '',
+            position: 'top'
+          }}
+        >
+          {#if typeof video.thumbnailData === 'string' && video.thumbnailData.length > 0}
+            <Img src={video.thumbnailData} alt={video.filename ?? 'Video attachment'} fallback="" />
+          {/if}
+          <span class="play-badge" aria-hidden="true">
+            <svg class="play-glyph" viewBox="0 0 16 16" fill="none">
+              <path d="M6 4.5v7l5.5-3.5z" fill="currentColor" />
+            </svg>
+          </span>
+        </svelte:element>
+        {#if typeof onRemoveVideo === 'function'}
+          <div class="remove-wrap">
+            <Button
+              variant="secondary"
+              iconOnly={true}
+              ariaLabel="Remove video"
+              testId={testId && `${testId}-remove-video-${video.id}`}
+              onclick={() => onRemoveVideo(video.id)}
+            >
+              {#snippet icon()}
+                {#if removeIcon}
+                  {@render removeIcon()}
+                {:else}
+                  <svg class="cross" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <path
+                      d="M4 4l8 8m0-8l-8 8"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                {/if}
+              {/snippet}
+            </Button>
+          </div>
+        {/if}
+      </div>
+    {/each}
+    {#each files as file (file.id)}
+      <div
+        class="chip"
+        data-pw={typeof testId === 'string' ? `${testId}-file-${file.id}` : null}
+        testID={typeof testId === 'string' ? `${testId}-file-${file.id}` : null}
+      >
+        <svelte:element
+          this={typeof onOpenFile === 'function' ? 'button' : 'div'}
+          type={typeof onOpenFile === 'function' ? 'button' : null}
+          role={typeof onOpenFile === 'function' ? 'button' : null}
+          aria-label={typeof onOpenFile === 'function' ? `Open ${file.filename}` : null}
+          class="thumb file-tile"
+          class:openable={typeof onOpenFile === 'function'}
+          onclick={typeof onOpenFile === 'function' ? () => onOpenFile(file) : null}
+        >
+          {#if fileIcon}
+            {@render fileIcon()}
+          {:else}
+            <svg class="file-glyph" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path
+                d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"
+                fill="currentColor"
+              />
+              <path
+                d="M14 2v6h6"
+                stroke="var(--attachment-chip-row-file-glyph-fold-color, #ffffff)"
+                stroke-width="1.5"
+                stroke-linejoin="round"
+              />
+            </svg>
+          {/if}
+          <div class="file-info">
+            <span class="file-name" use:tooltip={{ text: file.filename, position: 'top' }}>
+              {file.filename}
+            </span>
+          </div>
+        </svelte:element>
+        {#if typeof onRemoveFile === 'function'}
+          <div class="remove-wrap">
+            <Button
+              variant="secondary"
+              iconOnly={true}
+              ariaLabel="Remove file"
+              testId={testId && `${testId}-remove-file-${file.id}`}
+              onclick={() => onRemoveFile(file.id)}
+            >
+              {#snippet icon()}
+                {#if removeIcon}
+                  {@render removeIcon()}
+                {:else}
+                  <svg class="cross" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <path
+                      d="M4 4l8 8m0-8l-8 8"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                {/if}
+              {/snippet}
+            </Button>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </Scroller>
+{/if}
+
+<style>
+  /* Keyed on a component-namespaced class passed to the Scroller root — the Scroller is
+     this component's own root, so there is no scoped ancestor to hang the rule on. */
+  :global(.attachment-chip-row) {
+    --scroller-gap: var(--attachment-chip-row-gap, 0.5rem);
+  }
+
+  .chip {
+    position: relative;
+    flex-shrink: 0;
+
+    /* Top/right padding is the room the floating remove button straddles into — it
+       keeps the button inside the chip's own box, so a clipping ancestor (the
+       Scroller viewport, a composer strip) can never cut it off. */
+    padding-top: var(--attachment-chip-row-chip-padding-top, 0.25rem);
+    padding-right: var(--attachment-chip-row-chip-padding-right, 0.25rem);
+  }
+
+  .thumb {
+    display: block;
+    width: var(--attachment-chip-row-chip-size, 4.5rem);
+    height: var(--attachment-chip-row-chip-size, 4.5rem);
+    padding: 0;
+    border: 0;
+    border-radius: var(--attachment-chip-row-chip-border-radius, 0.5rem);
+    background-color: var(--attachment-chip-row-chip-background, #ffffff);
+    overflow: hidden;
+  }
+
+  button.thumb {
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+  }
+
+  .thumb :global(img) {
+    width: var(--attachment-chip-row-thumb-img-width, 100%);
+    height: var(--attachment-chip-row-thumb-img-height, 100%);
+    object-fit: var(--attachment-chip-row-thumb-img-fit, cover);
+  }
+
+  .remove-wrap {
+    position: absolute;
+    top: var(--attachment-chip-row-remove-offset, 0);
+    right: var(--attachment-chip-row-remove-offset, 0);
+    --button-width: var(--attachment-chip-row-remove-size, 1.25rem);
+    --button-height: var(--attachment-chip-row-remove-size, 1.25rem);
+    --button-min-width: 0;
+    --button-padding: 0;
+    --button-border-radius: var(--attachment-chip-row-remove-border-radius, 999px);
+
+    /* Self-contained colors, readable on both themes: a dark disc with a white
+       glyph and a white ring — never inherited from the ambient --button-* scope,
+       which flips with the host theme and can go dark-on-dark. */
+    --button-color: var(--attachment-chip-row-remove-background, #18181b);
+    --button-text-color: var(--attachment-chip-row-remove-color, #ffffff);
+    --button-hover-color: var(--attachment-chip-row-remove-hover-background, #3f3f46);
+    --button-border: var(--attachment-chip-row-remove-ring, 1.5px solid #ffffff);
+    --button-hover-border: var(--attachment-chip-row-remove-ring, 1.5px solid #ffffff);
+    --button-box-shadow: var(--attachment-chip-row-remove-box-shadow, 0 1px 3px rgb(0 0 0 / 30%));
+  }
+
+  .cross {
+    width: var(--attachment-chip-row-remove-glyph-size, 0.625rem);
+    height: var(--attachment-chip-row-remove-glyph-size, 0.625rem);
+  }
+
+  .video-tile {
+    position: relative;
+    background-color: var(--attachment-chip-row-video-tile-background, #18181b);
+  }
+
+  .play-badge {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .play-glyph {
+    width: var(--attachment-chip-row-play-glyph-size, 1.25rem);
+    height: var(--attachment-chip-row-play-glyph-size, 1.25rem);
+    color: var(--attachment-chip-row-play-glyph-color, #ffffff);
+    filter: var(--attachment-chip-row-play-glyph-shadow, drop-shadow(0 1px 2px rgb(0 0 0 / 45%)));
+  }
+
+  .file-tile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--attachment-chip-row-file-tile-gap, 0.25rem);
+    padding: var(--attachment-chip-row-file-tile-padding, 0.25rem 2px);
+    background-color: var(--attachment-chip-row-file-tile-background, #ededed);
+    border: var(--attachment-chip-row-file-tile-border, 1px solid #e1e1e1);
+    box-shadow: var(--attachment-chip-row-file-tile-box-shadow, 0 2px 0.25rem rgb(0 0 0 / 10%));
+    box-sizing: border-box;
+  }
+
+  .file-glyph {
+    width: var(--attachment-chip-row-file-glyph-size, 1.5rem);
+    height: var(--attachment-chip-row-file-glyph-size, 1.5rem);
+    color: var(--attachment-chip-row-file-glyph-color, #858585);
+    flex-shrink: 0;
+  }
+
+  .file-info {
+    width: 100%;
+    text-align: center;
+    min-width: 0;
+  }
+
+  .file-name {
+    display: block;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    font-size: var(--attachment-chip-row-file-name-font-size, 0.75rem);
+    font-weight: var(--attachment-chip-row-file-name-font-weight, 400);
+    letter-spacing: var(--attachment-chip-row-file-name-letter-spacing, normal);
+    line-height: var(--attachment-chip-row-file-name-line-height, 1.25rem);
+    color: var(--attachment-chip-row-file-name-color, #52525b);
+  }
+
+  @media (width <= 767px) {
+    .remove-wrap {
+      --button-width: var(--attachment-chip-row-remove-size, 1.125rem);
+      --button-height: var(--attachment-chip-row-remove-size, 1.125rem);
+    }
+  }
+</style>

package/dist/AttachmentChipRow/AttachmentChipRow.svelte.d.ts

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

package/dist/AttachmentChipRow/properties.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+export type AttachmentChipImage = {
+    id: string;
+    /** Image src for the thumbnail — a data URI or URL. */
+    thumbnailData: string;
+    filename?: string | null;
+};
+export type AttachmentChipFile = {
+    id: string;
+    filename: string;
+};
+export type AttachmentChipVideo = {
+    id: string;
+    /** Poster/thumbnail src for the tile — a data URI or URL. Omit for a plain dark tile. */
+    thumbnailData?: string | null;
+    filename?: string | null;
+};
+export type AttachmentChipRowProperties = OptionalAttachmentChipRowProperties & MandatoryAttachmentChipRowProperties;
+export type MandatoryAttachmentChipRowProperties = Record<never, never>;
+export type OptionalAttachmentChipRowProperties = {
+    /** Omit to render the row read-only — chips lose their remove buttons. */
+    onRemoveImage?: (id: string) => void;
+    onRemoveFile?: (id: string) => void;
+    onRemoveVideo?: (id: string) => void;
+    /**
+     * Open/preview callbacks — when provided, the chip's tile becomes a real button
+     * and clicking it fires with the attachment (e.g. open a lightbox, play the
+     * video). Omitted, the tile stays non-interactive.
+     */
+    onOpenImage?: (image: AttachmentChipImage) => void;
+    onOpenVideo?: (video: AttachmentChipVideo) => void;
+    onOpenFile?: (file: AttachmentChipFile) => void;
+    images?: AttachmentChipImage[];
+    files?: AttachmentChipFile[];
+    /** Video attachments — a poster tile with a play badge (or a plain dark tile without a poster). */
+    videos?: AttachmentChipVideo[];
+    /** Tooltip text for an image chip. Nothing is shown when omitted or empty. */
+    imageTooltip?: (image: AttachmentChipImage) => string;
+    /** Tooltip text for a video chip. Nothing is shown when omitted or empty. */
+    videoTooltip?: (video: AttachmentChipVideo) => string;
+    /** Glyph inside the remove button. Falls back to a built-in cross. */
+    removeIcon?: Snippet;
+    /** Glyph on a file chip. Falls back to a built-in document. */
+    fileIcon?: Snippet;
+    testId?: string;
+    classes?: string;
+};

package/dist/AttachmentChipRow/properties.js

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

package/dist/ChatBubble/ChatBubble.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ChatBubbleProperties } from './properties';
-declare const ChatBubble: import("svelte").Component<ChatBubbleProperties, {}, "open" | "dragX" | "dragY" | "panelWidth" | "panelHeight" | "expanded" | "expandedPanelWidth" | "expandedPanelHeight">;
+declare const ChatBubble: import("svelte").Component<ChatBubbleProperties, {}, "open" | "expanded" | "dragX" | "dragY" | "panelWidth" | "panelHeight" | "expandedPanelWidth" | "expandedPanelHeight">;
 type ChatBubble = ReturnType<typeof ChatBubble>;
 export default ChatBubble;

package/dist/ChatComposer/ChatComposer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from '../Button/Button.svelte';
   import Pill from '../Pill/Pill.svelte';
+  import AttachmentChipRow from '../AttachmentChipRow/AttachmentChipRow.svelte';
   import sendSvg from '../assets/send.svg?raw';
   import stopSvg from '../assets/stop.svg?raw';
   import micSvg from '../assets/mic.svg?raw';
@@ -17,6 +18,21 @@
     streaming = false,
     recording = false,
     attachments = $bindable([]),
+    attachmentsPreview,
+    richImages = [],
+    richFiles = [],
+    richVideos = [],
+    richImageTooltip,
+    richVideoTooltip,
+    richRemoveIcon,
+    richFileIcon,
+    onremoverichimage,
+    onremoverichfile,
+    onremoverichvideo,
+    onopenrichimage,
+    onopenrichvideo,
+    onopenrichfile,
+    sendable = null,
     accept = '',
     multiple = false,
     sendLabel = 'Send message',
@@ -27,22 +43,42 @@
     stopIcon,
     voiceIcon,
     attachIcon,
+    actionIcon,
+    actionLabel = 'Voice conversation',
     leading,
     onsubmit,
     oninput,
     onkeydown,
+    onpaste,
     onstop,
     onvoice,
     onattach,
+    onattachclick,
+    onaction,
     testId,
+    inputTestId,
+    inputAriaLabel,
+    sendTestId,
+    sendSlotTestId,
+    stopTestId,
+    voiceTestId,
+    attachTestId,
+    actionTestId,
     classes
   }: ChatComposerProperties = $props();
 
   let fileInput: HTMLInputElement | null = $state(null);
 
   let showVoice = $derived(typeof onvoice === 'function');
-  let showAttach = $derived(typeof onattach === 'function');
-  let canSend = $derived(!disabled && (value.trim().length > 0 || attachments.length > 0));
+  let showAttach = $derived(typeof onattach === 'function' || typeof onattachclick === 'function');
+  let hasRichAttachments = $derived(
+    richImages.length > 0 || richVideos.length > 0 || richFiles.length > 0
+  );
+
+  let canSend = $derived(
+    !disabled &&
+      (sendable ?? (value.trim().length > 0 || attachments.length > 0 || hasRichAttachments))
+  );
 
   function submit(): void {
     if (!canSend) {
@@ -100,7 +136,28 @@
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >
-  {#if attachments.length > 0}
+  {#if typeof attachmentsPreview === 'function'}
+    {@render attachmentsPreview()}
+  {:else if hasRichAttachments}
+    <div class="attachments-rich">
+      <AttachmentChipRow
+        images={richImages}
+        videos={richVideos}
+        files={richFiles}
+        onRemoveImage={onremoverichimage}
+        onRemoveVideo={onremoverichvideo}
+        onRemoveFile={onremoverichfile}
+        onOpenImage={onopenrichimage}
+        onOpenVideo={onopenrichvideo}
+        onOpenFile={onopenrichfile}
+        imageTooltip={richImageTooltip}
+        videoTooltip={richVideoTooltip}
+        removeIcon={richRemoveIcon}
+        fileIcon={richFileIcon}
+        testId={testId && `${testId}-rich-attachments`}
+      />
+    </div>
+  {:else if attachments.length > 0}
     <div class="attachments">
       {#each attachments as file, index (file.name + index)}
         <Pill text={file.name} dismissible ondismiss={() => removeAttachment(index)} />
@@ -111,7 +168,18 @@
   <div class="input-row">
     {#if showAttach}
       <div class="control attach">
-        <Button onclick={() => fileInput?.click()} {disabled} ariaLabel={attachLabel}>
+        <Button
+          onclick={() => {
+            if (typeof onattachclick === 'function') {
+              onattachclick();
+              return;
+            }
+            fileInput?.click();
+          }}
+          {disabled}
+          ariaLabel={attachLabel}
+          testId={attachTestId}
+        >
           {#if typeof attachIcon === 'function'}
             {@render attachIcon()}
           {:else}
@@ -137,20 +205,22 @@
 
     <textarea
       class="input"
+      data-pw={inputTestId ?? null}
       bind:value
       {placeholder}
       {disabled}
       rows="1"
-      aria-label={placeholder.length > 0 ? placeholder : 'Message'}
+      aria-label={inputAriaLabel ?? (placeholder.length > 0 ? placeholder : 'Message')}
       maxlength={maxLength > 0 ? maxLength : null}
       oninput={handleInput}
       onkeydown={handleKeydown}
+      onpaste={(event) => onpaste?.(event)}
       use:autoGrow={value}
     ></textarea>
 
     {#if showVoice}
       <div class="control voice" class:recording>
-        <Button onclick={() => onvoice?.()} {disabled} ariaLabel={voiceLabel}>
+        <Button onclick={() => onvoice?.()} {disabled} ariaLabel={voiceLabel} testId={voiceTestId}>
           {#if typeof voiceIcon === 'function'}
             {@render voiceIcon()}
           {:else}
@@ -162,8 +232,8 @@
     {/if}
 
     {#if streaming}
-      <div class="control send stop">
-        <Button onclick={() => onstop?.()} ariaLabel={stopLabel}>
+      <div class="control send stop" data-pw={sendSlotTestId ?? null}>
+        <Button onclick={() => onstop?.()} ariaLabel={stopLabel} testId={stopTestId}>
           {#if typeof stopIcon === 'function'}
             {@render stopIcon()}
           {:else}
@@ -172,9 +242,20 @@
           {/if}
         </Button>
       </div>
+    {:else if typeof onaction === 'function' && !canSend && !recording}
+      <div class="control send action" data-pw={sendSlotTestId ?? null}>
+        <Button onclick={() => onaction()} {disabled} ariaLabel={actionLabel} testId={actionTestId}>
+          {#if typeof actionIcon === 'function'}
+            {@render actionIcon()}
+          {:else}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html micSvg}
+          {/if}
+        </Button>
+      </div>
     {:else}
-      <div class="control send">
-        <Button onclick={submit} disabled={!canSend} ariaLabel={sendLabel}>
+      <div class="control send" data-pw={sendSlotTestId ?? null}>
+        <Button onclick={submit} disabled={!canSend} ariaLabel={sendLabel} testId={sendTestId}>
           {#if typeof sendIcon === 'function'}
             {@render sendIcon()}
           {:else}
@@ -205,6 +286,10 @@
     opacity: var(--chat-composer-disabled-opacity, 0.6);
   }
 
+  .attachments-rich {
+    padding: var(--chat-composer-attachments-padding, 2px 4px 0);
+  }
+
   .attachments {
     display: flex;
     flex-wrap: wrap;
@@ -233,6 +318,7 @@
     background: transparent;
     font-family: var(--chat-composer-font-family, inherit);
     font-size: var(--chat-composer-font-size, 0.9375rem);
+    font-weight: var(--chat-composer-font-weight, 400);
     line-height: var(--chat-composer-line-height, 1.5);
     color: var(--chat-composer-color, #18181b);
     padding: var(--chat-composer-input-padding, 6px 4px);