@juspay/svelte-ui-components 2.126.0 → 2.127.0

package/dist/ChatComposer/properties.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { AttachmentChipFile, AttachmentChipImage, AttachmentChipVideo } from '../AttachmentChipRow/properties';
 export type ChatComposerProperties = OptionalChatComposerProperties & ChatComposerEventProperties;
 export type OptionalChatComposerProperties = {
     value?: string;
@@ -9,6 +10,38 @@ export type OptionalChatComposerProperties = {
     streaming?: boolean;
     recording?: boolean;
     attachments?: File[];
+    /**
+     * Replaces the built-in attachment pill strip above the input row — render a
+     * richer preview there (e.g. AttachmentChipRow) driven by your own attachment
+     * model. When your model lives outside `attachments`, pair with `sendable` so
+     * attachment-only sends stay possible.
+     */
+    attachmentsPreview?: Snippet;
+    /**
+     * Processed image attachments for the built-in rich strip: when either rich
+     * list is non-empty the composer renders an AttachmentChipRow above the input
+     * row instead of the `attachments` pill strip, and counts the chips toward
+     * "can send". Opt-in — with both lists empty (the default) nothing changes.
+     * `attachmentsPreview` still replaces the strip entirely when provided.
+     */
+    richImages?: AttachmentChipImage[];
+    /** Processed file attachments for the built-in rich strip — see `richImages`. */
+    richFiles?: AttachmentChipFile[];
+    /** Processed video attachments for the built-in rich strip — see `richImages`. */
+    richVideos?: AttachmentChipVideo[];
+    /** Tooltip text for a rich image chip. Nothing is shown when omitted or empty. */
+    richImageTooltip?: (image: AttachmentChipImage) => string;
+    /** Tooltip text for a rich video chip. Nothing is shown when omitted or empty. */
+    richVideoTooltip?: (video: AttachmentChipVideo) => string;
+    /** Glyph inside the rich chips' remove buttons. Falls back to the chip row's cross. */
+    richRemoveIcon?: Snippet;
+    /** Glyph on a rich file chip. Falls back to the chip row's document glyph. */
+    richFileIcon?: Snippet;
+    /**
+     * Overrides the internal "can send" calculation (text or `attachments`
+     * present). `null` keeps the default. `disabled` still wins.
+     */
+    sendable?: boolean | null;
     accept?: string;
     multiple?: boolean;
     sendLabel?: string;
@@ -19,15 +52,58 @@ export type OptionalChatComposerProperties = {
     stopIcon?: Snippet;
     voiceIcon?: Snippet;
     attachIcon?: Snippet;
+    /** Glyph for the idle action button (see `onaction`). */
+    actionIcon?: Snippet;
+    actionLabel?: string;
     leading?: Snippet;
     testId?: string;
+    /** Test id emitted as `data-pw` on the textarea itself (none by default). */
+    inputTestId?: string;
+    /** Accessible name for the textarea. Defaults to the placeholder (or 'Message'). */
+    inputAriaLabel?: string;
+    /** Test ids for the control buttons (none by default). */
+    sendTestId?: string;
+    /** Test id on the send slot's wrapper — the same slot renders send, stop and action. */
+    sendSlotTestId?: string;
+    stopTestId?: string;
+    voiceTestId?: string;
+    attachTestId?: string;
+    actionTestId?: string;
     classes?: string;
 };
 export type ChatComposerEventProperties = {
     onsubmit?: (value: string, attachments: File[]) => void;
     oninput?: (value: string, event: Event) => void;
     onkeydown?: (event: KeyboardEvent) => void;
+    onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;
     onvoice?: () => void;
     onattach?: (files: File[]) => void;
+    /**
+     * Intercepts the attach button: when provided, clicking it calls this instead of
+     * opening the built-in file picker — for apps with their own chooser (camera /
+     * gallery / files).
+     */
+    onattachclick?: () => void;
+    /**
+     * Removal callbacks for the rich strip's chips. Omit them to render the rich
+     * chips read-only (no remove buttons), mirroring AttachmentChipRow.
+     */
+    onremoverichimage?: (id: string) => void;
+    onremoverichfile?: (id: string) => void;
+    onremoverichvideo?: (id: string) => void;
+    /**
+     * Open/preview callbacks for the rich strip's chips — when provided, a chip's
+     * tile becomes a real button and clicking it fires with the attachment (e.g.
+     * open a lightbox, play the video).
+     */
+    onopenrichimage?: (image: AttachmentChipImage) => void;
+    onopenrichvideo?: (video: AttachmentChipVideo) => void;
+    onopenrichfile?: (file: AttachmentChipFile) => void;
+    /**
+     * The composer's idle action (e.g. voice conversation mode). While the value is
+     * empty, nothing is sendable and no reply is streaming, the send button gives way
+     * to an action button that fires this.
+     */
+    onaction?: () => void;
 };

package/dist/ChatSuggestions/ChatSuggestions.svelte

@@ -1,31 +1,100 @@
 <script lang="ts">
   import Pill from '../Pill/Pill.svelte';
+  import Img from '../Img/Img.svelte';
+  import Scroller from '../Scroller/Scroller.svelte';
   import type { ChatSuggestion, ChatSuggestionsProperties } from './properties';
 
-  let { items, disabled = false, onselect, testId, classes }: ChatSuggestionsProperties = $props();
+  let {
+    items,
+    disabled = false,
+    layout = 'wrap',
+    direction = 'horizontal',
+    maxVisible,
+    loading = false,
+    icon,
+    chipClasses,
+    onselect,
+    testId,
+    classes
+  }: ChatSuggestionsProperties = $props();
 
-  function labelOf(item: ChatSuggestion): string {
-    return typeof item === 'string' ? item : item.label;
-  }
+  const labelOf = (item: ChatSuggestion): string => (typeof item === 'string' ? item : item.label);
 
-  function valueOf(item: ChatSuggestion): string {
+  const valueOf = (item: ChatSuggestion): string => {
     if (typeof item === 'string') {
       return item;
     }
     return item.value ?? item.label;
-  }
+  };
+
+  const iconOf = (item: ChatSuggestion): string | null =>
+    typeof item === 'string' ? null : (item.icon ?? null);
+
+  // The dispatched value is usually a longer phrasing of the label, so it doubles as
+  // the hover text. Suppressed when they are the same, to avoid a tooltip that just
+  // repeats the chip.
+  const hintOf = (item: ChatSuggestion): string | null => {
+    if (typeof item === 'string') {
+      return null;
+    }
+    if (typeof item.hint === 'string') {
+      return item.hint;
+    }
+    return typeof item.value === 'string' && item.value !== item.label ? item.value : null;
+  };
+
+  // Clamped so a negative limit means "show nothing", not slice-from-the-end.
+  let shown = $derived(
+    typeof maxVisible === 'number' ? items.slice(0, Math.max(0, maxVisible)) : items
+  );
 </script>
 
+{#snippet chips()}
+  {#each shown as item, index (index)}
+    {@const resolvedIcon = iconOf(item)}
+    <button
+      type="button"
+      class="chip {chipClasses ?? ''}"
+      title={hintOf(item)}
+      {disabled}
+      onclick={() => onselect?.(valueOf(item), index)}
+    >
+      <Pill text={labelOf(item)} {disabled}>
+        {#snippet leadingIcon()}
+          {#if typeof icon === 'function'}
+            {@render icon(resolvedIcon, index)}
+          {:else if typeof resolvedIcon === 'string'}
+            <Img src={resolvedIcon} alt="" fallback="" inlineSvg={true} />
+          {/if}
+        {/snippet}
+      </Pill>
+    </button>
+  {/each}
+{/snippet}
+
 <div
   class="chat-suggestions {classes ?? ''}"
+  class:vertical={direction === 'vertical'}
+  class:loading
   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}
+  {#if !loading}
+    {#if layout === 'scroll'}
+      <Scroller
+        {direction}
+        showArrows={false}
+        showGradient={false}
+        hideScrollbar={true}
+        dragToScroll={true}
+        classes="chat-suggestions-scroller"
+      >
+        {@render chips()}
+      </Scroller>
+    {:else}
+      {@render chips()}
+    {/if}
+  {/if}
 </div>
 
 <style>
@@ -39,8 +108,46 @@
     padding: var(--chat-suggestions-padding, 0);
   }
 
+  /* A vertical stack is a menu, not a chip row: each entry takes the full width so
+     the labels align, which is what makes a long list scannable. */
+  .chat-suggestions.vertical {
+    flex-direction: column;
+    align-items: var(--chat-suggestions-vertical-align-items, stretch);
+  }
+
+  .chat-suggestions.vertical .chip {
+    width: var(--chat-suggestions-vertical-chip-width, 100%);
+    --pill-width: 100%;
+    --pill-justify-content: flex-start;
+    --pill-text-align: left;
+  }
+
   .chip {
+    appearance: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+    cursor: pointer;
     display: flex;
+    /* A chip must never be wider than the row that holds it. Pills are content-sized
+       and never wrap their label, so a long one spilled past the right edge —
+       measured, four chips overflowed an 80px container.
+       max-width alone is not enough: a flex item's min-width is auto, so it refuses
+       to shrink below its content. min-width:0 lets it, and capping --pill-max-width
+       hands the overflow to Pill's own ellipsis. */
+    min-width: 0;
+    max-width: 100%;
+    --pill-max-width: 100%;
+    --pill-flex-shrink: 1;
     --pill-cursor: pointer;
   }
+
+  /* The Pill is itself a flex item, and its own min-width:auto is the last thing
+     holding the label at full width. Zeroing it is what actually lets the ellipsis run. */
+  .chip > :global(.pill) {
+    min-width: 0;
+  }
 </style>

package/dist/ChatSuggestions/properties.d.ts

@@ -1,15 +1,57 @@
+import type { Snippet } from 'svelte';
+/**
+ * A suggestion chip.
+ *
+ * `label` is what the merchant reads; `value` is what gets dispatched. They are
+ * separate because a short call-to-action ("Refund trends") usually stands in for
+ * a much longer query, and sending the label would send the wrong thing.
+ */
 export type ChatSuggestion = string | {
     label: string;
     value?: string;
+    /** Leading mark for the chip — an image or SVG *URL* (rendered via Img with
+     * inlineSvg). For raw markup or custom rendering, use the `icon` snippet. */
+    icon?: string;
+    /** Hover/long-press text. Defaults to `value` when that differs from `label`. */
+    hint?: string;
 };
+/**
+ * How the chips are arranged.
+ *
+ * `wrap` flows them onto as many lines as needed — right for a roomy panel.
+ * `scroll` keeps them on one line inside a draggable scroller — right for a
+ * composer on a phone, where wrapping would push the input off-screen.
+ */
+export type ChatSuggestionsLayout = 'wrap' | 'scroll';
+export type ChatSuggestionsDirection = 'horizontal' | 'vertical';
 export type ChatSuggestionsProperties = OptionalChatSuggestionsProperties & ChatSuggestionsEventProperties & MandatoryChatSuggestionsProperties;
 export type MandatoryChatSuggestionsProperties = {
     items: ChatSuggestion[];
 };
 export type OptionalChatSuggestionsProperties = {
     disabled?: boolean;
+    layout?: ChatSuggestionsLayout;
+    direction?: ChatSuggestionsDirection;
+    /** Render at most this many chips. Omit to render every item. */
+    maxVisible?: number;
+    /**
+     * Suppresses the whole row without unmounting it — for the window between asking
+     * and answering, where stale suggestions would invite a second wrong question.
+     */
+    loading?: boolean;
+    /** Custom mark per chip; receives the item's resolved icon string, or null. */
+    icon?: Snippet<[string | null, number]>;
     testId?: string;
     classes?: string;
+    /**
+     * Class string placed on EVERY chip wrapper.
+     *
+     * A consuming app usually keeps its chip appearance in a central stylesheet keyed on
+     * its own class name. Without a hook the library's own wrapper is the only thing in
+     * the tree, those central rules never match, and the chips silently fall back to the
+     * library's neutral defaults — which is a regression, not a theme.
+     */
+    chipClasses?: string;
 };
 export type ChatSuggestionsEventProperties = {
     onselect?: (value: string, index: number) => void;