@juspay/svelte-ui-components 2.124.0 → 2.125.0

package/dist/ChatToolStatus/ChatToolStatus.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Loader from '../Loader/Loader.svelte';
+  import type { ChatToolStatusProperties } from './properties';
+
+  let { label, icon, testId, classes }: ChatToolStatusProperties = $props();
+</script>
+
+<div
+  class="chat-tool-status {classes ?? ''}"
+  aria-live="polite"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  <span class="indicator">
+    {#if typeof icon === 'function'}
+      {@render icon()}
+    {:else}
+      <Loader />
+    {/if}
+  </span>
+  <span class="label">{label}</span>
+</div>
+
+<style>
+  .chat-tool-status {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--chat-tool-status-gap, 8px);
+    width: fit-content;
+    padding: var(--chat-tool-status-padding, 8px 14px);
+    background: var(--chat-tool-status-background, #ffffff);
+    border: var(--chat-tool-status-border, 1px solid #e4e4e7);
+    border-radius: var(--chat-tool-status-border-radius, 999px);
+    box-shadow: var(--chat-tool-status-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.08));
+    color: var(--chat-tool-status-color, #52525b);
+    font-size: var(--chat-tool-status-font-size, 0.85rem);
+    font-weight: var(--chat-tool-status-font-weight, 500);
+    max-width: var(--chat-tool-status-max-width, 100%);
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--chat-tool-status-indicator-color, currentColor);
+    --loader-foreground: var(--chat-tool-status-spinner-color, currentColor);
+    --loader-foreground-end: var(--chat-tool-status-spinner-color-end, transparent);
+    --loader-width: var(--chat-tool-status-spinner-size, 14px);
+    --loader-height: var(--chat-tool-status-spinner-size, 14px);
+    --loader-before-width: 7px;
+    --loader-before-height: 7px;
+    --loader-after-width: 11px;
+    --loader-after-height: 11px;
+    --loader-background: var(--chat-tool-status-background, #ffffff);
+  }
+
+  .label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/dist/ChatToolStatus/ChatToolStatus.svelte.d.ts

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

package/dist/ChatToolStatus/properties.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+export type ChatToolStatusProperties = OptionalChatToolStatusProperties & MandatoryChatToolStatusProperties;
+export type MandatoryChatToolStatusProperties = {
+    label: string;
+};
+export type OptionalChatToolStatusProperties = {
+    icon?: Snippet;
+    testId?: string;
+    classes?: string;
+};

package/dist/ChatToolStatus/properties.js

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

package/dist/LineChart/LineChart.svelte

@@ -228,6 +228,10 @@
     })
   );
 
+  // Markers paint back-to-front so the first series ends up on top — see the
+  // comment on the marker loop in the markup.
+  let markerPaintOrder = $derived(lines.map((_line, index) => index).reverse());
+
   let legendItems = $derived<LegendItem[]>(
     series.map((s, i) => ({
       label: s.name,
@@ -658,6 +662,38 @@
                 stroke-dasharray={line.dash}
                 fill="none"
               />
+              {#if showValues && pointLabelPlacements[si]}
+                {#each line.points as _point, pi (pi)}
+                  {@const pl = pointLabelPlacements[si][pi]}
+                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
+                    <text
+                      class="point-value"
+                      x={pl.x}
+                      y={pl.y}
+                      text-anchor="middle"
+                      dominant-baseline={pl.dominantBaseline}
+                      >{formatNumber(series[si].data[pi].y)}</text
+                    >
+                  {/if}
+                {/each}
+              {/if}
+            {/if}
+          {/each}
+
+          <!--
+            Point markers are painted after every line, and in REVERSE series
+            order. Two series that share a value put their markers on identical
+            coordinates, and SVG has no z-index — whichever is written last wins.
+            Painting forwards meant the last series in the array hid the first,
+            so a chart passed [primary, comparison] lost the primary series'
+            marker wherever the two periods happened to agree, most visibly at
+            the first bucket. Reversing here makes the FIRST series win, which is
+            the one a reader is looking at; the legend keeps its original order
+            because it is derived from `series`, not from this loop.
+          -->
+          {#each markerPaintOrder as si (si)}
+            {@const line = lines[si]}
+            {#if !line.hidden}
               {#if line.points.length === 1 && !showDots && Number.isFinite(line.points[0].x) && Number.isFinite(line.points[0].y)}
                 <circle
                   class="single-point"
@@ -684,21 +720,6 @@
                   {/if}
                 {/each}
               {/if}
-              {#if showValues && pointLabelPlacements[si]}
-                {#each line.points as _point, pi (pi)}
-                  {@const pl = pointLabelPlacements[si][pi]}
-                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
-                    <text
-                      class="point-value"
-                      x={pl.x}
-                      y={pl.y}
-                      text-anchor="middle"
-                      dominant-baseline={pl.dominantBaseline}
-                      >{formatNumber(series[si].data[pi].y)}</text
-                    >
-                  {/if}
-                {/each}
-              {/if}
             {/if}
           {/each}
 

package/dist/Resizable/Resizable.svelte

@@ -0,0 +1,304 @@
+<script lang="ts">
+  import type { ResizableProperties, ResizeEdge } from './properties';
+
+  let {
+    width = $bindable(null),
+    height = $bindable(null),
+    minWidth = 0,
+    maxWidth = Number.POSITIVE_INFINITY,
+    minHeight = 0,
+    maxHeight = Number.POSITIVE_INFINITY,
+    handles = ['bottom-right'],
+    step = 16,
+    disabled = false,
+    handleLabel = 'Resize',
+    children,
+    onresize,
+    onresizestart,
+    onresizeend,
+    testId,
+    classes
+  }: ResizableProperties = $props();
+
+  const DIRS: Record<ResizeEdge, { x: -1 | 0 | 1; y: -1 | 0 | 1 }> = {
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 },
+    'top-left': { x: -1, y: -1 },
+    'top-right': { x: 1, y: -1 },
+    'bottom-left': { x: -1, y: 1 },
+    'bottom-right': { x: 1, y: 1 }
+  };
+
+  let container: HTMLElement | null = $state(null);
+  let active: {
+    edge: ResizeEdge;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+  } | null = $state(null);
+
+  let activeHandles = $derived(disabled ? [] : handles);
+
+  function clampWidth(value: number): number {
+    return Math.min(maxWidth, Math.max(minWidth, value));
+  }
+
+  function clampHeight(value: number): number {
+    return Math.min(maxHeight, Math.max(minHeight, value));
+  }
+
+  function measuredWidth(): number {
+    return typeof width === 'number' ? width : (container?.offsetWidth ?? 0);
+  }
+
+  function measuredHeight(): number {
+    return typeof height === 'number' ? height : (container?.offsetHeight ?? 0);
+  }
+
+  function axisOf(edge: ResizeEdge): 'x' | 'y' | 'both' {
+    const dir = DIRS[edge];
+    if (dir.x !== 0 && dir.y !== 0) {
+      return 'both';
+    }
+    return dir.x !== 0 ? 'x' : 'y';
+  }
+
+  function orientationOf(edge: ResizeEdge): 'horizontal' | 'vertical' | null {
+    const axis = axisOf(edge);
+    if (axis === 'x') {
+      return 'vertical';
+    }
+    if (axis === 'y') {
+      return 'horizontal';
+    }
+    return null;
+  }
+
+  function startResize(
+    event: PointerEvent & { currentTarget: HTMLElement },
+    edge: ResizeEdge
+  ): void {
+    if (disabled) {
+      return;
+    }
+    event.preventDefault();
+    const startW = clampWidth(measuredWidth());
+    const startH = clampHeight(measuredHeight());
+    width = startW;
+    height = startH;
+    active = {
+      edge,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startW,
+      startH
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    onresizestart?.({ width: startW, height: startH });
+  }
+
+  function moveResize(event: PointerEvent): void {
+    if (active === null) {
+      return;
+    }
+    const dir = DIRS[active.edge];
+    if (dir.x !== 0) {
+      width = clampWidth(active.startW + dir.x * (event.clientX - active.startX));
+    }
+    if (dir.y !== 0) {
+      height = clampHeight(active.startH + dir.y * (event.clientY - active.startY));
+    }
+    onresize?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function endResize(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    active = null;
+    onresizeend?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function keyResize(event: KeyboardEvent, edge: ResizeEdge): void {
+    if (disabled) {
+      return;
+    }
+    const dir = DIRS[edge];
+    let nextWidth = measuredWidth();
+    let nextHeight = measuredHeight();
+    let handled = false;
+
+    if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+      nextWidth = clampWidth(nextWidth + (event.key === 'ArrowRight' ? step : -step));
+      handled = true;
+    }
+    if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      nextHeight = clampHeight(nextHeight + (event.key === 'ArrowDown' ? step : -step));
+      handled = true;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      width = nextWidth;
+      height = nextHeight;
+      onresize?.({ width: nextWidth, height: nextHeight });
+    }
+  }
+
+  function valueNow(edge: ResizeEdge): number | null {
+    const axis = axisOf(edge);
+    if (axis === 'y') {
+      return typeof height === 'number' ? height : null;
+    }
+    return typeof width === 'number' ? width : null;
+  }
+
+  function valueMin(edge: ResizeEdge): number {
+    return axisOf(edge) === 'y' ? minHeight : minWidth;
+  }
+
+  function valueMax(edge: ResizeEdge): number | null {
+    const max = axisOf(edge) === 'y' ? maxHeight : maxWidth;
+    return Number.isFinite(max) ? max : null;
+  }
+</script>
+
+<div
+  class="resizable {classes ?? ''}"
+  class:resizing={active !== null}
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+  bind:this={container}
+  style:width={typeof width === 'number' ? `${width}px` : null}
+  style:height={typeof height === 'number' ? `${height}px` : null}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+
+  {#each activeHandles as edge (edge)}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div
+      class="handle"
+      data-edge={edge}
+      role="separator"
+      tabindex="0"
+      aria-label={handleLabel}
+      aria-orientation={orientationOf(edge)}
+      aria-valuenow={valueNow(edge)}
+      aria-valuemin={valueMin(edge)}
+      aria-valuemax={valueMax(edge)}
+      onpointerdown={(event) => startResize(event, edge)}
+      onpointermove={moveResize}
+      onpointerup={endResize}
+      onkeydown={(event) => keyResize(event, edge)}
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .resizable {
+    position: relative;
+    box-sizing: border-box;
+    max-width: var(--resizable-max-width, none);
+    max-height: var(--resizable-max-height, none);
+    transition: var(--resizable-transition, none);
+  }
+
+  .resizable.resizing {
+    user-select: none;
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resizable {
+      transition: none;
+    }
+  }
+
+  .handle {
+    position: absolute;
+    touch-action: none;
+    z-index: var(--resizable-handle-z-index, 2);
+    background: var(--resizable-handle-color, transparent);
+  }
+
+  .handle:focus-visible {
+    outline: var(--resizable-handle-focus-outline, 2px solid #3b5bdb);
+    outline-offset: var(--resizable-handle-focus-outline-offset, -2px);
+  }
+
+  .handle[data-edge='top'],
+  .handle[data-edge='bottom'] {
+    left: 0;
+    right: 0;
+    height: var(--resizable-edge-size, 8px);
+    cursor: ns-resize;
+  }
+
+  .handle[data-edge='left'],
+  .handle[data-edge='right'] {
+    top: 0;
+    bottom: 0;
+    width: var(--resizable-edge-size, 8px);
+    cursor: ew-resize;
+  }
+
+  .handle[data-edge='top'] {
+    top: 0;
+  }
+
+  .handle[data-edge='bottom'] {
+    bottom: 0;
+  }
+
+  .handle[data-edge='left'] {
+    left: 0;
+  }
+
+  .handle[data-edge='right'] {
+    right: 0;
+  }
+
+  .handle[data-edge='top-left'],
+  .handle[data-edge='top-right'],
+  .handle[data-edge='bottom-left'],
+  .handle[data-edge='bottom-right'] {
+    width: var(--resizable-corner-size, 14px);
+    height: var(--resizable-corner-size, 14px);
+    z-index: var(--resizable-corner-z-index, 3);
+  }
+
+  .handle[data-edge='top-left'] {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+
+  .handle[data-edge='top-right'] {
+    top: 0;
+    right: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-left'] {
+    bottom: 0;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+  }
+</style>

package/dist/Resizable/Resizable.svelte.d.ts

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

package/dist/Resizable/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type ResizeEdge = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ResizeSize = {
+    width: number;
+    height: number;
+};
+export type ResizableProperties = OptionalResizableProperties & ResizableEventProperties;
+export type OptionalResizableProperties = {
+    width?: number | null;
+    height?: number | null;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    handles?: ResizeEdge[];
+    step?: number;
+    disabled?: boolean;
+    handleLabel?: string;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ResizableEventProperties = {
+    onresize?: (size: ResizeSize) => void;
+    onresizestart?: (size: ResizeSize) => void;
+    onresizeend?: (size: ResizeSize) => void;
+};

package/dist/Resizable/properties.js

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

package/dist/assets/attach.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 7v9a4 4 0 0 1-8 0V6.5a2.5 2.5 0 0 1 5 0V15.5" />
+</svg>

package/dist/assets/chat.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+</svg>

package/dist/assets/mic.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9" y="2" width="6" height="12" rx="3" />
+  <path d="M5 11a7 7 0 0 0 14 0" />
+  <line x1="12" y1="18" x2="12" y2="22" />
+</svg>

package/dist/assets/retry.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="23 4 23 10 17 10" />
+  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+</svg>

package/dist/assets/send.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 19V5" />
+  <path d="M6 11l6-6 6 6" />
+</svg>

package/dist/assets/stop.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <rect x="7" y="7" width="10" height="10" rx="2" />
+</svg>

package/dist/assets/thumb-down.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z" />
+  <path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3" />
+</svg>

package/dist/assets/thumb-up.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z" />
+  <path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+</svg>

package/dist/index.d.ts

@@ -77,6 +77,17 @@ export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { default as ChipInput } from './ChipInput/ChipInput.svelte';
 export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzoneTrigger.svelte';
+export { default as Chat } from './Chat/Chat.svelte';
+export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
+export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
+export { default as ChatMessageList } from './ChatMessageList/ChatMessageList.svelte';
+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 Resizable } from './Resizable/Resizable.svelte';
+export { ChatController } from './Chat/controller.svelte';
+export { partyOf } from './Chat/roles';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -151,5 +162,15 @@ export type * from './ProportionBar/properties';
 export type * from './ChipInput/properties';
 export type * from './FileDropzoneTrigger/properties';
 export type * from './_chart/highlight';
+export type * from './Chat/properties';
+export type * from './Chat/types';
+export type * from './ChatHeader/properties';
+export type * from './ChatMessage/properties';
+export type * from './ChatMessageList/properties';
+export type * from './ChatComposer/properties';
+export type * from './ChatSuggestions/properties';
+export type * from './ChatToolStatus/properties';
+export type * from './ChatBubble/properties';
+export type * from './Resizable/properties';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -77,5 +77,16 @@ export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { default as ProportionBar } from './ProportionBar/ProportionBar.svelte';
 export { default as ChipInput } from './ChipInput/ChipInput.svelte';
 export { default as FileDropzoneTrigger } from './FileDropzoneTrigger/FileDropzoneTrigger.svelte';
+export { default as Chat } from './Chat/Chat.svelte';
+export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
+export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
+export { default as ChatMessageList } from './ChatMessageList/ChatMessageList.svelte';
+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 Resizable } from './Resizable/Resizable.svelte';
+export { ChatController } from './Chat/controller.svelte';
+export { partyOf } from './Chat/roles';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

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