@juspay/svelte-ui-components 4.35.1 → 4.36.0

package/dist/ChatComposer/ChatComposer.svelte

@@ -60,6 +60,7 @@
     actionLabel = 'Voice conversation',
     actionText,
     leading,
+    trailing,
     statusText,
     statusTestId,
     slashCommands = null,
@@ -71,6 +72,7 @@
     slashItem,
     onsubmit,
     oninput,
+    oninputfocus,
     onkeydown,
     onpaste,
     onstop,
@@ -92,6 +94,11 @@
   }: ChatComposerProperties = $props();
 
   let fileInput: HTMLInputElement | null = $state(null);
+  let inputElement: HTMLTextAreaElement | null = $state(null);
+
+  export const focus = (options?: FocusOptions): void => {
+    inputElement?.focus(options);
+  };
 
   let showVoice = $derived(typeof onvoice === 'function');
   let showAttach = $derived(typeof onattach === 'function' || typeof onattachclick === 'function');
@@ -391,6 +398,7 @@
 {#snippet textInput()}
   <textarea
     class="input"
+    bind:this={inputElement}
     data-pw={inputTestId ?? null}
     bind:value
     {placeholder}
@@ -404,6 +412,7 @@
     aria-activedescendant={slashActiveId}
     maxlength={maxLength > 0 ? maxLength : null}
     oninput={handleInput}
+    onfocus={(event) => oninputfocus?.(event)}
     onkeydown={handleKeydown}
     onpaste={(event) => onpaste?.(event)}
     use:autoGrow={value}
@@ -480,6 +489,9 @@
       </Button>
     </div>
   {/if}
+  {#if typeof trailing === 'function'}
+    {@render trailing()}
+  {/if}
 {/snippet}
 
 <div

package/dist/ChatComposer/ChatComposer.svelte.d.ts

@@ -1,4 +1,6 @@
 import type { ChatComposerProperties } from './properties';
-declare const ChatComposer: import("svelte").Component<ChatComposerProperties, {}, "value" | "attachments">;
+declare const ChatComposer: import("svelte").Component<ChatComposerProperties, {
+    focus: (options?: FocusOptions) => void;
+}, "value" | "attachments">;
 type ChatComposer = ReturnType<typeof ChatComposer>;
 export default ChatComposer;

package/dist/ChatComposer/properties.d.ts

@@ -85,6 +85,8 @@ export type OptionalChatComposerProperties = {
     /** Optional visible text beside the idle action icon; omitted keeps icon-only markup. */
     actionText?: string;
     leading?: Snippet;
+    /** Additional controls after the send/stop control. */
+    trailing?: Snippet;
     /**
      * Opt-in sr-only status region (`role="status" aria-live="polite"`) for
      * narrating composer state changes -- e.g. "Recording. Press Escape to stop
@@ -145,6 +147,8 @@ export type ChatComposerEventProperties = {
      */
     onsubmit?: (value: string, attachments: File[]) => boolean | void | Promise<boolean | void>;
     oninput?: (value: string, event: Event) => void;
+    /** Textarea focus, named separately from the native HTMLElement onfocus accessor. */
+    oninputfocus?: (event: FocusEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;

package/dist/ChatHeader/ChatHeader.svelte

@@ -2,6 +2,8 @@
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
   import closeSvg from '../assets/close.svg?raw';
+  import fullscreenSvg from '../assets/fullscreen.svg?raw';
+  import exitFullscreenSvg from '../assets/exit-fullscreen.svg?raw';
   import type { ChatHeaderProperties } from './properties';
 
   let {
@@ -11,6 +13,11 @@
     imageAlt = '',
     avatar,
     actions,
+    expanded = $bindable(false),
+    showExpand,
+    expandLabel = 'Expand',
+    collapseLabel = 'Collapse',
+    onexpandchange,
     closeIcon,
     closeLabel = 'Close',
     showClose,
@@ -21,6 +28,12 @@
   }: ChatHeaderProperties = $props();
 
   let displayClose = $derived(showClose ?? typeof onclose === 'function');
+  let displayExpand = $derived(showExpand ?? typeof onexpandchange === 'function');
+
+  const toggleExpanded = (): void => {
+    expanded = !expanded;
+    onexpandchange?.(expanded);
+  };
 </script>
 
 <header
@@ -53,6 +66,18 @@
       {#if typeof actions === 'function'}
         {@render actions()}
       {/if}
+      {#if displayExpand}
+        <div class="expand">
+          <Button
+            variant="ghost"
+            onclick={toggleExpanded}
+            ariaLabel={expanded ? collapseLabel : expandLabel}
+          >
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html expanded ? exitFullscreenSvg : fullscreenSvg}
+          </Button>
+        </div>
+      {/if}
       {#if displayClose}
         <div class="close">
           <Button onclick={() => onclose?.()} ariaLabel={closeLabel}>
@@ -166,4 +191,21 @@
     height: 100%;
     width: 100%;
   }
+
+  .expand {
+    --button-width: var(--chat-header-expand-size, var(--chat-header-close-size, 36px));
+    --button-height: var(--chat-header-expand-size, var(--chat-header-close-size, 36px));
+    --button-padding: var(--chat-header-expand-padding, var(--chat-header-close-padding, 8px));
+    --button-border-radius: var(--chat-header-expand-border-radius, 50%);
+    --button-color: var(--chat-header-expand-background-color, transparent);
+    --button-text-color: var(--chat-header-expand-color, #52525b);
+    --button-hover-text-color: var(--chat-header-expand-color, #52525b);
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-header-expand-hover-background-color, #f4f4f5);
+  }
+
+  .expand :global(svg) {
+    height: 100%;
+    width: 100%;
+  }
 </style>

package/dist/ChatHeader/ChatHeader.svelte.d.ts

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

package/dist/ChatHeader/properties.d.ts

@@ -7,6 +7,10 @@ export type OptionalChatHeaderProperties = {
     imageAlt?: string;
     avatar?: Snippet;
     actions?: Snippet;
+    expanded?: boolean;
+    showExpand?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
     closeIcon?: Snippet;
     closeLabel?: string;
     showClose?: boolean;
@@ -16,4 +20,5 @@ export type OptionalChatHeaderProperties = {
 };
 export type ChatHeaderEventProperties = {
     onclose?: () => void;
+    onexpandchange?: (expanded: boolean) => void;
 };

package/dist/Resizable/Resizable.svelte

@@ -88,8 +88,13 @@
     event.preventDefault();
     const startW = clampWidth(measuredWidth());
     const startH = clampHeight(measuredHeight());
-    width = startW;
-    height = startH;
+    const direction = DIRS[edge];
+    if (direction.x !== 0) {
+      width = startW;
+    }
+    if (direction.y !== 0) {
+      height = startH;
+    }
     active = {
       edge,
       pointerId: event.pointerId,
@@ -147,8 +152,12 @@
 
     if (handled) {
       event.preventDefault();
-      width = nextWidth;
-      height = nextHeight;
+      if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+        width = nextWidth;
+      }
+      if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        height = nextHeight;
+      }
       onresize?.({ width: nextWidth, height: nextHeight });
     }
   }

package/dist/styles/theme-dark.css

@@ -167,6 +167,8 @@
   --chat-header-subtitle-color: #9ca3af;
   --chat-header-close-color: #9ca3af;
   --chat-header-close-hover-background-color: #252535;
+  --chat-header-expand-color: #9ca3af;
+  --chat-header-expand-hover-background-color: #252535;
 
   /* ChatMessageList */
   --chat-message-list-jump-background-color: #1e1e2e;