@juspay/svelte-ui-components 2.126.0 → 2.128.0

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,9 +88,12 @@ 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';
+export { SpeechToTextController } from './SpeechToText/controller.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -118,6 +124,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 +142,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 +158,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';
@@ -164,6 +173,7 @@ export type * from './FileDropzoneTrigger/properties';
 export type * from './_chart/highlight';
 export type * from './Chat/properties';
 export type * from './Chat/types';
+export type * from './SpeechToText/types';
 export type * from './ChatHeader/properties';
 export type * from './ChatMessage/properties';
 export type * from './ChatMessageList/properties';
@@ -171,6 +181,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,8 +88,11 @@ 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';
+export { SpeechToTextController } from './SpeechToText/controller.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

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