@juspay/svelte-ui-components 2.124.0 → 2.125.0

package/dist/ChatComposer/ChatComposer.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Pill from '../Pill/Pill.svelte';
+  import sendSvg from '../assets/send.svg?raw';
+  import stopSvg from '../assets/stop.svg?raw';
+  import micSvg from '../assets/mic.svg?raw';
+  import attachSvg from '../assets/attach.svg?raw';
+  import type { Action } from 'svelte/action';
+  import type { ChatComposerProperties } from './properties';
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    disabled = false,
+    submitOnEnter = true,
+    maxLength = 0,
+    streaming = false,
+    recording = false,
+    attachments = $bindable([]),
+    accept = '',
+    multiple = false,
+    sendLabel = 'Send message',
+    stopLabel = 'Stop generating',
+    voiceLabel = 'Voice input',
+    attachLabel = 'Attach files',
+    sendIcon,
+    stopIcon,
+    voiceIcon,
+    attachIcon,
+    leading,
+    onsubmit,
+    oninput,
+    onkeydown,
+    onstop,
+    onvoice,
+    onattach,
+    testId,
+    classes
+  }: ChatComposerProperties = $props();
+
+  let fileInput: HTMLInputElement | null = $state(null);
+
+  let showVoice = $derived(typeof onvoice === 'function');
+  let showAttach = $derived(typeof onattach === 'function');
+  let canSend = $derived(!disabled && (value.trim().length > 0 || attachments.length > 0));
+
+  function submit(): void {
+    if (!canSend) {
+      return;
+    }
+    onsubmit?.(value, attachments);
+    value = '';
+    attachments = [];
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (
+      submitOnEnter &&
+      event.key === 'Enter' &&
+      !event.shiftKey &&
+      !event.isComposing &&
+      !streaming
+    ) {
+      event.preventDefault();
+      submit();
+    }
+    onkeydown?.(event);
+  }
+
+  function handleInput(event: Event & { currentTarget: HTMLTextAreaElement }): void {
+    oninput?.(event.currentTarget.value, event);
+  }
+
+  function handleFiles(event: Event & { currentTarget: HTMLInputElement }): void {
+    const picked = Array.from(event.currentTarget.files ?? []);
+    if (picked.length > 0) {
+      attachments = [...attachments, ...picked];
+      onattach?.(picked);
+    }
+    event.currentTarget.value = '';
+  }
+
+  function removeAttachment(index: number): void {
+    attachments = attachments.filter((_, position) => position !== index);
+  }
+
+  const autoGrow: Action<HTMLTextAreaElement, string> = (node) => {
+    function resize(): void {
+      node.style.height = '0px';
+      node.style.height = `${node.scrollHeight}px`;
+    }
+    resize();
+    return { update: resize };
+  };
+</script>
+
+<div
+  class="chat-composer {classes ?? ''}"
+  class:disabled
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {#if attachments.length > 0}
+    <div class="attachments">
+      {#each attachments as file, index (file.name + index)}
+        <Pill text={file.name} dismissible ondismiss={() => removeAttachment(index)} />
+      {/each}
+    </div>
+  {/if}
+
+  <div class="input-row">
+    {#if showAttach}
+      <div class="control attach">
+        <Button onclick={() => fileInput?.click()} {disabled} ariaLabel={attachLabel}>
+          {#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"
+      bind:value
+      {placeholder}
+      {disabled}
+      rows="1"
+      aria-label={placeholder.length > 0 ? placeholder : 'Message'}
+      maxlength={maxLength > 0 ? maxLength : null}
+      oninput={handleInput}
+      onkeydown={handleKeydown}
+      use:autoGrow={value}
+    ></textarea>
+
+    {#if showVoice}
+      <div class="control voice" class:recording>
+        <Button onclick={() => onvoice?.()} {disabled} ariaLabel={voiceLabel}>
+          {#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">
+        <Button onclick={() => onstop?.()} ariaLabel={stopLabel}>
+          {#if typeof stopIcon === 'function'}
+            {@render stopIcon()}
+          {:else}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html stopSvg}
+          {/if}
+        </Button>
+      </div>
+    {:else}
+      <div class="control send">
+        <Button onclick={submit} disabled={!canSend} ariaLabel={sendLabel}>
+          {#if typeof sendIcon === 'function'}
+            {@render sendIcon()}
+          {:else}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html sendSvg}
+          {/if}
+        </Button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .chat-composer {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-composer-stack-gap, 8px);
+    width: var(--chat-composer-width, 100%);
+    padding: var(--chat-composer-padding, 8px);
+    background: var(--chat-composer-background, #ffffff);
+    border: var(--chat-composer-border, 1px solid #e4e4e7);
+    border-radius: var(--chat-composer-border-radius, 24px);
+    box-shadow: var(--chat-composer-box-shadow, none);
+  }
+
+  .chat-composer.disabled {
+    opacity: var(--chat-composer-disabled-opacity, 0.6);
+  }
+
+  .attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--chat-composer-attachments-gap, 6px);
+    padding: var(--chat-composer-attachments-padding, 2px 4px 0);
+  }
+
+  .input-row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--chat-composer-gap, 8px);
+  }
+
+  .leading {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .input {
+    flex: 1;
+    box-sizing: border-box;
+    resize: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: var(--chat-composer-font-family, inherit);
+    font-size: var(--chat-composer-font-size, 0.9375rem);
+    line-height: var(--chat-composer-line-height, 1.5);
+    color: var(--chat-composer-color, #18181b);
+    padding: var(--chat-composer-input-padding, 6px 4px);
+    max-height: var(--chat-composer-max-height, 160px);
+    overflow-y: auto;
+  }
+
+  .input::placeholder {
+    color: var(--chat-composer-placeholder-color, #a1a1aa);
+  }
+
+  .control {
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .control :global(svg) {
+    height: 100%;
+    width: 100%;
+  }
+
+  .attach,
+  .voice {
+    --button-width: var(--chat-composer-action-size, 36px);
+    --button-height: var(--chat-composer-action-size, 36px);
+    --button-padding: var(--chat-composer-action-padding, 8px);
+    --button-border-radius: var(--chat-composer-action-border-radius, 50%);
+    --button-color: var(--chat-composer-action-background-color, transparent);
+    --button-text-color: var(--chat-composer-action-color, #52525b);
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-composer-action-hover-background-color, #f4f4f5);
+  }
+
+  .voice.recording {
+    --button-color: var(--chat-composer-voice-recording-background-color, #fee2e2);
+    --button-text-color: var(--chat-composer-voice-recording-color, #dc2626);
+  }
+
+  .send {
+    --button-width: var(--chat-composer-send-size, 40px);
+    --button-height: var(--chat-composer-send-size, 40px);
+    --button-padding: var(--chat-composer-send-padding, 8px);
+    --button-border-radius: var(--chat-composer-send-border-radius, 50%);
+    --button-color: var(--chat-composer-send-background-color, #18181b);
+    --button-text-color: var(--chat-composer-send-color, #ffffff);
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-composer-send-hover-background-color, #27272a);
+  }
+
+  .send.stop {
+    --button-color: var(--chat-composer-stop-background-color, #18181b);
+    --button-text-color: var(--chat-composer-stop-color, #ffffff);
+  }
+</style>

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

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

package/dist/ChatComposer/properties.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+export type ChatComposerProperties = OptionalChatComposerProperties & ChatComposerEventProperties;
+export type OptionalChatComposerProperties = {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    submitOnEnter?: boolean;
+    maxLength?: number;
+    streaming?: boolean;
+    recording?: boolean;
+    attachments?: File[];
+    accept?: string;
+    multiple?: boolean;
+    sendLabel?: string;
+    stopLabel?: string;
+    voiceLabel?: string;
+    attachLabel?: string;
+    sendIcon?: Snippet;
+    stopIcon?: Snippet;
+    voiceIcon?: Snippet;
+    attachIcon?: Snippet;
+    leading?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ChatComposerEventProperties = {
+    onsubmit?: (value: string, attachments: File[]) => void;
+    oninput?: (value: string, event: Event) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onstop?: () => void;
+    onvoice?: () => void;
+    onattach?: (files: File[]) => void;
+};

package/dist/ChatComposer/properties.js

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

package/dist/ChatHeader/ChatHeader.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import Img from '../Img/Img.svelte';
+  import closeSvg from '../assets/close.svg?raw';
+  import type { ChatHeaderProperties } from './properties';
+
+  let {
+    title = '',
+    subtitle = '',
+    image,
+    imageAlt = '',
+    avatar,
+    actions,
+    closeIcon,
+    closeLabel = 'Close',
+    showClose,
+    onclose,
+    children,
+    testId,
+    classes
+  }: ChatHeaderProperties = $props();
+
+  let displayClose = $derived(showClose ?? typeof onclose === 'function');
+</script>
+
+<header
+  class="chat-header {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  <div class="bar">
+    <div class="brand">
+      {#if typeof avatar === 'function'}
+        <div class="avatar">{@render avatar()}</div>
+      {:else if typeof image === 'string' && image.length > 0}
+        <span class="image">
+          <Img src={image} alt={imageAlt} />
+        </span>
+      {/if}
+      {#if title.length > 0 || subtitle.length > 0}
+        <div class="titles">
+          {#if title.length > 0}
+            <span class="title">{title}</span>
+          {/if}
+          {#if subtitle.length > 0}
+            <span class="subtitle">{subtitle}</span>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    <div class="trailing">
+      {#if typeof actions === 'function'}
+        {@render actions()}
+      {/if}
+      {#if displayClose}
+        <div class="close">
+          <Button onclick={() => onclose?.()} ariaLabel={closeLabel}>
+            {#if typeof closeIcon === 'function'}
+              {@render closeIcon()}
+            {:else}
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+              {@html closeSvg}
+            {/if}
+          </Button>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if typeof children === 'function'}
+    <div class="extra">{@render children()}</div>
+  {/if}
+</header>
+
+<style>
+  .chat-header {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-header-extra-gap, 8px);
+    width: var(--chat-header-width, 100%);
+    padding: var(--chat-header-padding, 0.75rem 1.5rem);
+    background: var(--chat-header-background, transparent);
+    border-bottom: var(--chat-header-border-bottom, none);
+  }
+
+  .bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--chat-header-gap, 12px);
+    width: 100%;
+  }
+
+  .extra {
+    width: 100%;
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: var(--chat-header-brand-gap, 10px);
+    min-width: 0;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .image {
+    display: contents;
+    --image-height: var(--chat-header-image-size, 28px);
+    --image-width: var(--chat-header-image-size, 28px);
+    --image-object-fit: var(--chat-header-image-object-fit, cover);
+    --image-border-radius: var(--chat-header-image-border-radius, 50%);
+    --image-padding: 0px;
+    --image-margin: 0px;
+  }
+
+  .titles {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .title {
+    font-size: var(--chat-header-title-font-size, 0.95rem);
+    font-weight: var(--chat-header-title-font-weight, 600);
+    color: var(--chat-header-title-color, #18181b);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .subtitle {
+    font-size: var(--chat-header-subtitle-font-size, 0.7rem);
+    font-weight: var(--chat-header-subtitle-font-weight, 500);
+    color: var(--chat-header-subtitle-color, #71717a);
+    text-transform: var(--chat-header-subtitle-text-transform, none);
+    letter-spacing: var(--chat-header-subtitle-letter-spacing, normal);
+  }
+
+  .trailing {
+    display: flex;
+    align-items: center;
+    gap: var(--chat-header-trailing-gap, 8px);
+    flex-shrink: 0;
+  }
+
+  .close {
+    --button-width: var(--chat-header-close-size, 36px);
+    --button-height: var(--chat-header-close-size, 36px);
+    --button-padding: var(--chat-header-close-padding, 8px);
+    --button-border-radius: var(--chat-header-close-border-radius, 50%);
+    --button-color: var(--chat-header-close-background-color, transparent);
+    --button-text-color: var(--chat-header-close-color, #52525b);
+    --button-content-gap: 0px;
+    --button-hover-color: var(--chat-header-close-hover-background-color, #f4f4f5);
+  }
+
+  .close :global(svg) {
+    height: 100%;
+    width: 100%;
+  }
+</style>

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

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

package/dist/ChatHeader/properties.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type ChatHeaderProperties = OptionalChatHeaderProperties & ChatHeaderEventProperties;
+export type OptionalChatHeaderProperties = {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    imageAlt?: string;
+    avatar?: Snippet;
+    actions?: Snippet;
+    closeIcon?: Snippet;
+    closeLabel?: string;
+    showClose?: boolean;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ChatHeaderEventProperties = {
+    onclose?: () => void;
+};

package/dist/ChatHeader/properties.js

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