@juspay/svelte-ui-components 4.34.1 → 4.35.0

package/dist/ChatComposer/ChatComposer.svelte

@@ -20,6 +20,7 @@
 
   let {
     value = $bindable(''),
+    layout = 'row',
     placeholder = '',
     disabled = false,
     textDisabled = null,
@@ -57,6 +58,7 @@
     attachIcon,
     actionIcon,
     actionLabel = 'Voice conversation',
+    actionText,
     leading,
     statusText,
     statusTestId,
@@ -346,6 +348,140 @@
   };
 </script>
 
+{#snippet leadingControls()}
+  {#if showAttach}
+    <div class="control attach">
+      <Button
+        variant="ghost"
+        onclick={() => {
+          if (typeof onattachclick === 'function') {
+            onattachclick();
+            return;
+          }
+          fileInput?.click();
+        }}
+        {disabled}
+        ariaLabel={attachLabel}
+        testId={attachTestId}
+      >
+        {#if typeof attachIcon === 'function'}
+          {@render attachIcon()}
+        {:else}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html attachSvg}
+        {/if}
+      </Button>
+      <input
+        bind:this={fileInput}
+        type="file"
+        {accept}
+        {multiple}
+        class="file-input"
+        onchange={handleFiles}
+        hidden
+      />
+    </div>
+  {/if}
+
+  {#if typeof leading === 'function'}
+    <div class="leading">{@render leading()}</div>
+  {/if}
+{/snippet}
+
+{#snippet textInput()}
+  <textarea
+    class="input"
+    data-pw={inputTestId ?? null}
+    bind:value
+    {placeholder}
+    disabled={resolvedTextDisabled}
+    rows="1"
+    aria-label={inputAriaLabel ?? (placeholder.length > 0 ? placeholder : 'Message')}
+    role={slashCommands !== null ? 'combobox' : null}
+    aria-expanded={slashCommands !== null ? slashOpen : null}
+    aria-controls={slashOpen ? slashListboxId : null}
+    aria-autocomplete={slashCommands !== null ? 'list' : null}
+    aria-activedescendant={slashActiveId}
+    maxlength={maxLength > 0 ? maxLength : null}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    onpaste={(event) => onpaste?.(event)}
+    use:autoGrow={value}
+  ></textarea>
+{/snippet}
+
+{#snippet trailingControls()}
+  {#if showVoice}
+    <div
+      class="control voice"
+      class:recording={dictationState === 'recording'}
+      class:busy={dictationState === 'busy'}
+    >
+      <Button
+        variant="ghost"
+        onclick={() => onvoice?.()}
+        disabled={resolvedVoiceDisabled}
+        ariaLabel={voiceLabel}
+        testId={voiceTestId}
+      >
+        {#if typeof voiceIcon === 'function'}
+          {@render voiceIcon()}
+        {:else}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html micSvg}
+        {/if}
+      </Button>
+    </div>
+  {/if}
+
+  {#if streaming}
+    <div class="control send stop" data-pw={sendSlotTestId ?? null}>
+      <Button onclick={() => onstop?.()} ariaLabel={stopLabel} testId={stopTestId}>
+        {#if typeof stopIcon === 'function'}
+          {@render stopIcon()}
+        {:else}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html stopSvg}
+        {/if}
+      </Button>
+    </div>
+  {:else if typeof onaction === 'function' && !canSend && dictationState === 'idle'}
+    <div
+      class="control send action"
+      class:action-with-text={typeof actionText === 'string' && actionText.length > 0}
+      data-pw={sendSlotTestId ?? null}
+    >
+      <Button
+        onclick={() => onaction()}
+        disabled={resolvedSendDisabled}
+        ariaLabel={actionLabel}
+        testId={actionTestId}
+      >
+        {#if typeof actionIcon === 'function'}
+          {@render actionIcon()}
+        {:else}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html micSvg}
+        {/if}
+        {#if typeof actionText === 'string' && actionText.length > 0}
+          <span>{actionText}</span>
+        {/if}
+      </Button>
+    </div>
+  {:else}
+    <div class="control send" data-pw={sendSlotTestId ?? null}>
+      <Button onclick={submit} disabled={!canSend} ariaLabel={sendLabel} testId={sendTestId}>
+        {#if typeof sendIcon === 'function'}
+          {@render sendIcon()}
+        {:else}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html sendSvg}
+        {/if}
+      </Button>
+    </div>
+  {/if}
+{/snippet}
+
 <div
   class="chat-composer {classes ?? ''}"
   class:disabled
@@ -441,126 +577,18 @@
     </div>
   {/if}
 
-  <div class="input-row">
-    {#if showAttach}
-      <div class="control attach">
-        <Button
-          variant="ghost"
-          onclick={() => {
-            if (typeof onattachclick === 'function') {
-              onattachclick();
-              return;
-            }
-            fileInput?.click();
-          }}
-          {disabled}
-          ariaLabel={attachLabel}
-          testId={attachTestId}
-        >
-          {#if typeof attachIcon === 'function'}
-            {@render attachIcon()}
-          {:else}
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            {@html attachSvg}
-          {/if}
-        </Button>
-        <input
-          bind:this={fileInput}
-          type="file"
-          {accept}
-          {multiple}
-          class="file-input"
-          onchange={handleFiles}
-          hidden
-        />
-      </div>
-    {/if}
-
-    {#if typeof leading === 'function'}
-      <div class="leading">{@render leading()}</div>
-    {/if}
-
-    <textarea
-      class="input"
-      data-pw={inputTestId ?? null}
-      bind:value
-      {placeholder}
-      disabled={resolvedTextDisabled}
-      rows="1"
-      aria-label={inputAriaLabel ?? (placeholder.length > 0 ? placeholder : 'Message')}
-      role={slashCommands !== null ? 'combobox' : null}
-      aria-expanded={slashCommands !== null ? slashOpen : null}
-      aria-controls={slashOpen ? slashListboxId : null}
-      aria-autocomplete={slashCommands !== null ? 'list' : null}
-      aria-activedescendant={slashActiveId}
-      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={dictationState === 'recording'}
-        class:busy={dictationState === 'busy'}
-      >
-        <Button
-          variant="ghost"
-          onclick={() => onvoice?.()}
-          disabled={resolvedVoiceDisabled}
-          ariaLabel={voiceLabel}
-          testId={voiceTestId}
-        >
-          {#if typeof voiceIcon === 'function'}
-            {@render voiceIcon()}
-          {:else}
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            {@html micSvg}
-          {/if}
-        </Button>
-      </div>
-    {/if}
-
-    {#if streaming}
-      <div class="control send stop" data-pw={sendSlotTestId ?? null}>
-        <Button onclick={() => onstop?.()} ariaLabel={stopLabel} testId={stopTestId}>
-          {#if typeof stopIcon === 'function'}
-            {@render stopIcon()}
-          {:else}
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            {@html stopSvg}
-          {/if}
-        </Button>
-      </div>
-    {:else if typeof onaction === 'function' && !canSend && dictationState === 'idle'}
-      <div class="control send action" data-pw={sendSlotTestId ?? null}>
-        <Button
-          onclick={() => onaction()}
-          disabled={resolvedSendDisabled}
-          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 class="input-row" class:stacked={layout === 'stacked'}>
+    {#if layout === 'stacked'}
+      <div class="text-row">{@render textInput()}</div>
+      <div class="control-row">
+        {@render leadingControls()}
+        <div class="control-spacer" aria-hidden="true"></div>
+        {@render trailingControls()}
       </div>
     {:else}
-      <div class="control send" data-pw={sendSlotTestId ?? null}>
-        <Button onclick={submit} disabled={!canSend} ariaLabel={sendLabel} testId={sendTestId}>
-          {#if typeof sendIcon === 'function'}
-            {@render sendIcon()}
-          {:else}
-            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-            {@html sendSvg}
-          {/if}
-        </Button>
-      </div>
+      {@render leadingControls()}
+      {@render textInput()}
+      {@render trailingControls()}
     {/if}
   </div>
 </div>
@@ -609,6 +637,32 @@
     gap: var(--chat-composer-gap, 8px);
   }
 
+  .input-row.stacked {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--chat-composer-stack-gap, 8px);
+  }
+
+  .text-row {
+    display: flex;
+    min-width: 0;
+  }
+
+  .control-row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--chat-composer-gap, 8px);
+  }
+
+  .control-spacer {
+    flex: 1;
+  }
+
+  .stacked .input {
+    min-width: 0;
+    width: 100%;
+  }
+
   .leading {
     display: flex;
     align-items: center;
@@ -776,6 +830,46 @@
     color: var(--chat-composer-slash-badge-color, #2563eb);
   }
 
+  .send.action {
+    --button-width: var(--chat-composer-idle-action-width, var(--chat-composer-send-size, 40px));
+    --button-padding: var(
+      --chat-composer-idle-action-padding,
+      var(--chat-composer-send-padding, 8px)
+    );
+    --button-border-radius: var(
+      --chat-composer-idle-action-border-radius,
+      var(--chat-composer-send-border-radius, 50%)
+    );
+    --button-color: var(
+      --chat-composer-idle-action-background-color,
+      var(--chat-composer-send-background-color, #18181b)
+    );
+    --button-text-color: var(
+      --chat-composer-idle-action-color,
+      var(--chat-composer-send-color, #ffffff)
+    );
+    --button-hover-color: var(
+      --chat-composer-idle-action-hover-background-color,
+      var(--chat-composer-send-hover-background-color, #27272a)
+    );
+    --button-hover-text-color: var(
+      --chat-composer-idle-action-hover-color,
+      var(--button-text-color)
+    );
+    --button-content-gap: var(--chat-composer-idle-action-gap, 0px);
+  }
+
+  .send.action.action-with-text {
+    --button-width: var(--chat-composer-idle-action-width, max-content);
+    --button-padding: var(--chat-composer-idle-action-padding, 8px 12px);
+    --button-content-gap: var(--chat-composer-idle-action-gap, 6px);
+  }
+
+  .action-with-text :global(svg) {
+    width: var(--chat-composer-idle-action-icon-size, 20px);
+    height: var(--chat-composer-idle-action-icon-size, 20px);
+  }
+
   /* Visually hidden but still read by assistive technology -- same pattern
      Table's caption and Label's required marker use. */
   .sr-only {

package/dist/ChatComposer/properties.d.ts

@@ -3,6 +3,8 @@ import type { AttachmentChipFile, AttachmentChipImage, AttachmentChipVideo } fro
 export type ChatComposerProperties = OptionalChatComposerProperties & ChatComposerEventProperties;
 export type OptionalChatComposerProperties = {
     value?: string;
+    /** Text above a separate control row when stacked; row preserves the default. */
+    layout?: 'row' | 'stacked';
     placeholder?: string;
     disabled?: boolean;
     /**
@@ -80,6 +82,8 @@ export type OptionalChatComposerProperties = {
     /** Glyph for the idle action button (see `onaction`). */
     actionIcon?: Snippet;
     actionLabel?: string;
+    /** Optional visible text beside the idle action icon; omitted keeps icon-only markup. */
+    actionText?: string;
     leading?: Snippet;
     /**
      * Opt-in sr-only status region (`role="status" aria-live="polite"`) for

package/dist/CommandMenu/CommandMenu.svelte

@@ -16,6 +16,8 @@
   let {
     items,
     open = $bindable(false),
+    query = $bindable(''),
+    shortcutEnabled = true,
     placeholder = 'Search commands...',
     emptyText = 'No results found.',
     testId,
@@ -28,7 +30,8 @@
     onclose,
     classes,
     ariaLabel = 'Command menu',
-    clearStateOnClose = false
+    clearStateOnClose = false,
+    onquerychange
   }: CommandMenuProperties = $props();
 
   // Stable per-instance ids keep ARIA references distinct across menus.
@@ -56,8 +59,6 @@
     easingTokens: ['--command-menu-panel-transition-easing', '--ease-smooth-out', '--motion-easing']
   };
 
-  let query = $state('');
-  let activeIndex = $state(0);
   let inputElement: HTMLInputElement | null = $state(null);
   let listElement: HTMLDivElement | null = $state(null);
   let dialogElement: HTMLDivElement | null = $state(null);
@@ -98,6 +99,10 @@
     return result;
   });
 
+  // A changed result list (including externally changed query/items) resets
+  // navigation. Keyboard/pointer navigation can override this until it changes.
+  let activeIndex = $derived(flatItems.length > 0 ? 0 : -1);
+
   let flatIndexLookup = $derived.by(() => {
     const map = new SvelteMap<string, number>();
     for (let i = 0; i < flatItems.length; i++) {
@@ -113,7 +118,7 @@
   // is keyed by its flat index (see the option's own id below) — null once the
   // list is empty, since there is then no option to describe.
   let activeDescendantId = $derived(
-    flatItems.length > 0 ? `command-menu-option-${uid}-${activeIndex}` : null
+    flatItems.at(activeIndex) ? `command-menu-option-${uid}-${activeIndex}` : null
   );
 
   // Guarded rather than assumed single-fire: out:tokenizedFly keeps the dialog
@@ -125,7 +130,10 @@
       return;
     }
     open = false;
-    query = '';
+    if (query !== '') {
+      query = '';
+      onquerychange?.('');
+    }
     activeIndex = 0;
     onclose?.();
   }
@@ -151,7 +159,7 @@
   }
 
   function handleKeyDown(event: KeyboardEvent) {
-    if (!open) {
+    if (!open || event.isComposing || event.keyCode === 229) {
       return;
     }
 
@@ -247,10 +255,31 @@
   // against other listeners are unchanged; the opt-out is read per event, which also makes
   // toggling enableHotkey after mount take effect immediately.
   function handleGlobalKeyDown(event: KeyboardEvent) {
-    if (!enableHotkey) {
+    if (
+      !shortcutEnabled ||
+      !enableHotkey ||
+      event.defaultPrevented ||
+      event.isComposing ||
+      event.keyCode === 229 ||
+      event.repeat ||
+      event.altKey
+    ) {
       return;
     }
-    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      const dialog = event
+        .composedPath()
+        .find(
+          (node) =>
+            node instanceof Element &&
+            node.matches('[role="dialog"], [role="alertdialog"], [aria-modal="true"]')
+        );
+      if (
+        dialog instanceof Element &&
+        (dialogElement === null || !dialog.contains(dialogElement))
+      ) {
+        return;
+      }
       event.preventDefault();
       if (open) {
         close();
@@ -388,9 +417,11 @@
         {/if}
         <input
           bind:this={inputElement}
-          bind:value={query}
-          oninput={() => {
+          value={query}
+          oninput={(event) => {
+            query = event.currentTarget.value;
             activeIndex = 0;
+            onquerychange?.(query);
           }}
           type="text"
           class="command-menu-input"

package/dist/CommandMenu/CommandMenu.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CommandMenuProperties } from './properties';
-declare const CommandMenu: import("svelte").Component<CommandMenuProperties, {}, "open">;
+declare const CommandMenu: import("svelte").Component<CommandMenuProperties, {}, "open" | "query">;
 type CommandMenu = ReturnType<typeof CommandMenu>;
 export default CommandMenu;

package/dist/CommandMenu/properties.d.ts

@@ -13,6 +13,10 @@ export type MandatoryCommandMenuProperties = {
 };
 export type OptionalCommandMenuProperties = {
     open?: boolean;
+    /** Bindable search text. Omit to keep the built-in uncontrolled search. */
+    query?: string;
+    /** Disable the built-in global Cmd/Ctrl+K listener when the caller owns shortcuts. */
+    shortcutEnabled?: boolean;
     placeholder?: string;
     emptyText?: string;
     testId?: string;
@@ -45,6 +49,8 @@ export type OptionalCommandMenuProperties = {
     clearStateOnClose?: boolean;
 };
 export type CommandMenuEventProperties = {
+    /** Fires on user input and when closing resets a non-empty query. */
+    onquerychange?: (query: string) => void;
     onselect?: (item: CommandItem) => void;
     onclose?: () => void;
 };