@juspay/svelte-ui-components 2.126.0 → 2.127.0

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  import Accordion from '../Accordion/Accordion.svelte';
+  import Button from '../Button/Button.svelte';
+  import Loader from '../Loader/Loader.svelte';
+  import type { ThinkingIndicatorProperties } from './properties';
+
+  let {
+    label,
+    detail,
+    expanded = $bindable(false),
+    variant = 'default',
+    onToggle,
+    avatar,
+    toggleIcon,
+    testId,
+    toggleTestId,
+    detailTestId,
+    labelTestId,
+    classes
+  }: ThinkingIndicatorProperties = $props();
+
+  // A detail string is what makes the indicator expandable. Without one there is
+  // nothing to reveal, so it renders as a plain live status line instead of a
+  // disclosure control. `bare` overrides that entirely.
+  const isExpandable = $derived(
+    variant !== 'bare' && typeof detail === 'string' && detail.length > 0
+  );
+
+  const handleToggle = (): void => {
+    expanded = !expanded;
+    onToggle?.();
+  };
+</script>
+
+{#if isExpandable}
+  <div
+    class="thinking-indicator expandable {classes ?? ''}"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
+    <div class="toggle">
+      <Button
+        onclick={handleToggle}
+        ariaExpanded={expanded}
+        testId={toggleTestId ?? (testId && `${testId}-toggle`)}
+      >
+        <span class="status-row">
+          <span class="avatar">
+            {#if avatar}{@render avatar()}{:else}<Loader />{/if}
+          </span>
+          <span class="status-label static-label" data-pw={labelTestId ?? null}>{label}</span>
+        </span>
+        <span class="arrow" class:expanded aria-hidden="true">
+          {#if toggleIcon}
+            {@render toggleIcon()}
+          {:else}
+            <svg viewBox="0 0 16 16" fill="none">
+              <path
+                d="M4 6l4 4 4-4"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          {/if}
+        </span>
+      </Button>
+    </div>
+    <Accordion expand={expanded}>
+      <p class="detail" data-pw={detailTestId ?? (testId && `${testId}-detail`) ?? null}>
+        {detail}
+      </p>
+    </Accordion>
+  </div>
+{:else if variant === 'bare'}
+  <span
+    class="status-label {classes ?? ''}"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+    >{#if typeof labelTestId === 'string'}<span data-pw={labelTestId} testID={labelTestId}
+        >{label}</span
+      >{:else}{label}{/if}</span
+  >
+{:else}
+  <div
+    class="thinking-indicator status-host {classes ?? ''}"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+  >
+    <span class="status-row">
+      <span class="avatar">
+        {#if avatar}{@render avatar()}{:else}<Loader />{/if}
+      </span>
+      <span class="status-label" data-pw={labelTestId ?? null}>{label}</span>
+    </span>
+  </div>
+{/if}
+
+<style>
+  .thinking-indicator {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .expandable {
+    border-bottom: var(--thinking-indicator-border-bottom, 1px solid #e4e4e7);
+    padding-block: var(--thinking-indicator-padding-block, 0.5rem);
+    margin-bottom: var(--thinking-indicator-margin-bottom, 1rem);
+  }
+
+  .toggle {
+    width: 100%;
+    --button-color: transparent;
+    --button-border: none;
+    --button-box-shadow: none;
+    --button-hover-box-shadow: none;
+    --button-active-box-shadow: none;
+    --button-width: 100%;
+    --button-padding: 0;
+    --button-justify-content: flex-start;
+    --button-text-color: inherit;
+  }
+
+  /* A flex ROW host makes the inner status-row hug its content, so the shimmer
+     gradient maps to the text's own width rather than the full container. */
+  .status-host {
+    display: flex;
+    align-items: center;
+  }
+
+  .status-row {
+    display: flex;
+    align-items: center;
+    gap: var(--thinking-indicator-gap, 0.25rem);
+    min-width: 0;
+  }
+
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--thinking-indicator-avatar-size, 1.5rem);
+    height: var(--thinking-indicator-avatar-size, 1.5rem);
+    --loader-width: var(--thinking-indicator-avatar-loader-size, 1rem);
+    --loader-height: var(--thinking-indicator-avatar-loader-size, 1rem);
+  }
+
+  .status-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+    font-size: var(--thinking-indicator-font-size, 0.75rem);
+    line-height: var(--thinking-indicator-line-height, 1.25rem);
+    color: var(--thinking-indicator-label-color, #858585);
+    background: var(
+      --thinking-indicator-shimmer-gradient,
+      linear-gradient(90deg, #858585 0%, #bebebe 50%, #858585 100%)
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: thinking-indicator-shimmer var(--thinking-indicator-shimmer-duration, 2s) linear
+      infinite;
+  }
+
+  /* The expandable summary holds still; only live status lines shimmer. */
+  .static-label {
+    animation: none;
+    -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
+  }
+
+  .arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--thinking-indicator-arrow-size, 1rem);
+    height: var(--thinking-indicator-arrow-size, 1rem);
+    margin-left: var(--thinking-indicator-arrow-margin-left, 0.25rem);
+    color: var(--thinking-indicator-arrow-color, #7a7a7a);
+    transform: rotate(-90deg);
+    transition: var(--thinking-indicator-arrow-transition, transform 0.2s ease-in-out);
+  }
+
+  .arrow svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .arrow.expanded {
+    transform: rotate(0deg);
+  }
+
+  .detail {
+    margin: 0;
+    padding-top: var(--thinking-indicator-detail-padding-top, 0.5rem);
+    font-size: var(--thinking-indicator-detail-font-size, 0.875rem);
+    line-height: var(--thinking-indicator-detail-line-height, 1.5);
+    color: var(--thinking-indicator-detail-color, #bebebe);
+    text-align: left;
+  }
+
+  @keyframes thinking-indicator-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>

package/dist/ThinkingIndicator/ThinkingIndicator.svelte.d.ts

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

package/dist/ThinkingIndicator/properties.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+export type ThinkingIndicatorVariant = 'default' | 'bare';
+export type ThinkingIndicatorProperties = OptionalThinkingIndicatorProperties & MandatoryThinkingIndicatorProperties;
+export type MandatoryThinkingIndicatorProperties = {
+    label: string;
+};
+export type OptionalThinkingIndicatorProperties = {
+    /** Reasoning/steps text. Providing one makes the indicator an expandable disclosure. */
+    detail?: string;
+    /** Bindable disclosure state — meaningful only when `detail` is set. */
+    expanded?: boolean;
+    /**
+     * `bare` renders only the shimmering label — for chat bubbles where the surrounding
+     * UI already supplies the avatar and layout. It never becomes expandable.
+     */
+    variant?: ThinkingIndicatorVariant;
+    onToggle?: () => void;
+    /** Leading indicator. Falls back to the built-in spinner. */
+    avatar?: Snippet;
+    /** Disclosure chevron. Falls back to a built-in chevron that rotates on expand. */
+    toggleIcon?: Snippet;
+    testId?: string;
+    /** Override the toggle button's test id (default: `<testId>-toggle`). */
+    toggleTestId?: string;
+    /** Override the detail text's test id (default: `<testId>-detail`). */
+    detailTestId?: string;
+    /** Test id for the status label itself (none by default). */
+    labelTestId?: string;
+    classes?: string;
+};

package/dist/ThinkingIndicator/properties.js

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

package/dist/Tooltip/tooltip-action.js

@@ -174,6 +174,11 @@ export const tooltip = (node, options) => {
         if (bubbleEl !== null || delayTimer !== null) {
             return;
         }
+        // An empty text renders a degenerate stub bubble (arrow + sliver) that reads as a
+        // clipped artifact — consumers legitimately pass '' to mean "no tooltip here".
+        if (currentOptions.text.trim().length === 0) {
+            return;
+        }
         const doShow = () => {
             // Re-check after the delay: hide() may have been called while the timer was pending.
             if (bubbleEl !== null) {

package/dist/TypewriterText/TypewriterText.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { onMount, onDestroy, untrack } from 'svelte';
+  import type { TypewriterTextProperties } from './properties';
+
+  let {
+    text,
+    speed = 15,
+    isStreaming = false,
+    renderText,
+    testId,
+    classes
+  }: TypewriterTextProperties = $props();
+
+  let displayedText = $state('');
+  let currentIndex = $state(0);
+  let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  // Where typing left off, so newly streamed-in text continues rather than restarts.
+  let previousTextLength = $state(0);
+
+  const typeNextCharacter = (): void => {
+    if (currentIndex < text.length) {
+      displayedText = text.substring(0, currentIndex + 1);
+      currentIndex++;
+      timeoutId = setTimeout(typeNextCharacter, speed);
+    }
+  };
+
+  // A reactive timer cannot be a $derived — same escape the chart components use.
+  // Internal typing state is read untracked so the effect re-runs only when the
+  // `text` prop itself changes, never on our own per-character writes.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    const nextText = text;
+    untrack(() => {
+      // Streamed text CONTINUES what is already displayed. Anything else — a
+      // shorter string, or one that no longer starts with what was typed — is a
+      // replacement: stop the timer and retype from the start, instead of
+      // leaving stale characters on screen.
+      const isContinuation =
+        nextText.length >= previousTextLength && nextText.startsWith(displayedText);
+      if (!isContinuation) {
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+        displayedText = '';
+        currentIndex = 0;
+        previousTextLength = 0;
+      }
+      if (nextText.length > 0 && nextText.length > previousTextLength) {
+        if (currentIndex >= previousTextLength) {
+          if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+          }
+          typeNextCharacter();
+        }
+        previousTextLength = nextText.length;
+      }
+    });
+  });
+
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!isStreaming && text.length > 0) {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+      }
+      displayedText = text;
+      currentIndex = text.length;
+    }
+  });
+
+  onMount(() => {
+    if (text.length > 0) {
+      previousTextLength = text.length;
+      typeNextCharacter();
+    }
+  });
+
+  onDestroy(() => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+  });
+</script>
+
+<div
+  class="typewriter-text {classes ?? ''}"
+  class:plain={typeof renderText !== 'function'}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {#if typeof renderText === 'function'}
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html renderText(displayedText)}
+  {:else}
+    {displayedText}
+  {/if}
+</div>
+
+<style>
+  .typewriter-text {
+    max-width: var(--typewriter-text-max-width, 100%);
+  }
+
+  .plain {
+    white-space: var(--typewriter-text-white-space, pre-wrap);
+  }
+</style>

package/dist/TypewriterText/TypewriterText.svelte.d.ts

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

package/dist/TypewriterText/properties.d.ts

@@ -0,0 +1,21 @@
+export type TypewriterTextProperties = OptionalTypewriterTextProperties & MandatoryTypewriterTextProperties;
+export type MandatoryTypewriterTextProperties = {
+    text: string;
+};
+export type OptionalTypewriterTextProperties = {
+    /** Milliseconds between characters. */
+    speed?: number;
+    /**
+     * While `true`, text revealed so far stays and new text keeps typing as `text` grows.
+     * The moment it turns `false`, all remaining text is shown at once.
+     */
+    isStreaming?: boolean;
+    /**
+     * Renders the revealed text as HTML — pass a markdown renderer to type rich text.
+     * The component trusts the returned string, so sanitise inside the renderer if the
+     * text can contain untrusted input. When omitted, the text renders as plain text.
+     */
+    renderText?: (text: string) => string;
+    testId?: string;
+    classes?: string;
+};

package/dist/TypewriterText/properties.js

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

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Tabs } from './Tabs/Tabs.svelte';
 export { default as Choicebox } from './Choicebox/Choicebox.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as TypewriterText } from './TypewriterText/TypewriterText.svelte';
 export { tooltip } from './Tooltip/tooltip-action';
 export { default as Shimmer } from './Shimmer/Shimmer.svelte';
 export { default as Progress } from './Progress/Progress.svelte';
@@ -52,6 +53,7 @@ export { default as ContextMenu } from './ContextMenu/ContextMenu.svelte';
 export { default as Calendar } from './Calendar/Calendar.svelte';
 export { default as RelativeTime } from './RelativeTime/RelativeTime.svelte';
 export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
+export { default as ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.svelte';
 export { default as Book } from './Book/Book.svelte';
 export { default as Browser } from './Browser/Browser.svelte';
 export { default as Phone } from './Phone/Phone.svelte';
@@ -66,6 +68,7 @@ export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.sv
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
 export { default as LineChart } from './LineChart/LineChart.svelte';
 export { default as AreaChart } from './AreaChart/AreaChart.svelte';
+export { default as AttachmentChipRow } from './AttachmentChipRow/AttachmentChipRow.svelte';
 export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
@@ -85,6 +88,8 @@ export { default as ChatComposer } from './ChatComposer/ChatComposer.svelte';
 export { default as ChatSuggestions } from './ChatSuggestions/ChatSuggestions.svelte';
 export { default as ChatToolStatus } from './ChatToolStatus/ChatToolStatus.svelte';
 export { default as ChatBubble } from './ChatBubble/ChatBubble.svelte';
+export { default as HITL } from './HITL/HITL.svelte';
+export { pauseAllConfirmationTimers } from './HITL/timers';
 export { default as Resizable } from './Resizable/Resizable.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
@@ -118,6 +123,7 @@ export type * from './Tabs/properties';
 export type * from './Choicebox/properties';
 export type * from './Slider/properties';
 export type * from './Tooltip/properties';
+export type * from './TypewriterText/properties';
 export type * from './Shimmer/properties';
 export type * from './Progress/properties';
 export type * from './Pill/properties';
@@ -135,6 +141,7 @@ export type * from './ContextMenu/properties';
 export type * from './Calendar/properties';
 export type * from './RelativeTime/properties';
 export type * from './ThemeSwitcher/properties';
+export type * from './ThinkingIndicator/properties';
 export type * from './Book/properties';
 export type * from './Browser/properties';
 export type * from './Phone/properties';
@@ -150,6 +157,7 @@ export type * from './DateRangePicker/properties';
 export type * from './Breadcrumb/properties';
 export type * from './LineChart/properties';
 export type * from './AreaChart/properties';
+export type * from './AttachmentChipRow/properties';
 export type * from './BarChart/properties';
 export type * from './PieChart/properties';
 export type * from './SankeyChart/properties';
@@ -171,6 +179,7 @@ export type * from './ChatComposer/properties';
 export type * from './ChatSuggestions/properties';
 export type * from './ChatToolStatus/properties';
 export type * from './ChatBubble/properties';
+export type * from './HITL/properties';
 export type * from './Resizable/properties';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -34,6 +34,7 @@ export { default as Tabs } from './Tabs/Tabs.svelte';
 export { default as Choicebox } from './Choicebox/Choicebox.svelte';
 export { default as Slider } from './Slider/Slider.svelte';
 export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as TypewriterText } from './TypewriterText/TypewriterText.svelte';
 export { tooltip } from './Tooltip/tooltip-action';
 export { default as Shimmer } from './Shimmer/Shimmer.svelte';
 export { default as Progress } from './Progress/Progress.svelte';
@@ -52,6 +53,7 @@ export { default as ContextMenu } from './ContextMenu/ContextMenu.svelte';
 export { default as Calendar } from './Calendar/Calendar.svelte';
 export { default as RelativeTime } from './RelativeTime/RelativeTime.svelte';
 export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
+export { default as ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.svelte';
 export { default as Book } from './Book/Book.svelte';
 export { default as Browser } from './Browser/Browser.svelte';
 export { default as Phone } from './Phone/Phone.svelte';
@@ -66,6 +68,7 @@ export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.sv
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
 export { default as LineChart } from './LineChart/LineChart.svelte';
 export { default as AreaChart } from './AreaChart/AreaChart.svelte';
+export { default as AttachmentChipRow } from './AttachmentChipRow/AttachmentChipRow.svelte';
 export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
@@ -85,6 +88,8 @@ export { default as ChatComposer } from './ChatComposer/ChatComposer.svelte';
 export { default as ChatSuggestions } from './ChatSuggestions/ChatSuggestions.svelte';
 export { default as ChatToolStatus } from './ChatToolStatus/ChatToolStatus.svelte';
 export { default as ChatBubble } from './ChatBubble/ChatBubble.svelte';
+export { default as HITL } from './HITL/HITL.svelte';
+export { pauseAllConfirmationTimers } from './HITL/timers';
 export { default as Resizable } from './Resizable/Resizable.svelte';
 export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.126.0",
+  "version": "2.127.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",