@juspay/svelte-ui-components 2.124.0 → 2.126.0

package/dist/Chat/Chat.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import ChatHeader from '../ChatHeader/ChatHeader.svelte';
+  import ChatMessageList from '../ChatMessageList/ChatMessageList.svelte';
+  import ChatComposer from '../ChatComposer/ChatComposer.svelte';
+  import ChatSuggestions from '../ChatSuggestions/ChatSuggestions.svelte';
+  import ChatToolStatus from '../ChatToolStatus/ChatToolStatus.svelte';
+  import type { ChatProperties } from './properties';
+
+  let {
+    messages,
+    value = $bindable(''),
+    title = '',
+    subtitle = '',
+    image,
+    imageAlt = '',
+    placeholder = '',
+    disabled = false,
+    streaming = false,
+    recording = false,
+    autoscroll = true,
+    toolStatus = null,
+    suggestions = [],
+    attachments = $bindable([]),
+    accept = '',
+    multiple = false,
+    allowCopy = false,
+    closeLabel = 'Close',
+    showClose,
+    headerAvatar,
+    headerActions,
+    headerContent,
+    message,
+    messageAttachments,
+    empty,
+    composerLeading,
+    sendIcon,
+    stopIcon,
+    voiceIcon,
+    attachIcon,
+    onsend,
+    onsuggestion,
+    onclose,
+    onstop,
+    onvoice,
+    onattach,
+    onretry,
+    onfeedback,
+    testId,
+    classes
+  }: ChatProperties = $props();
+
+  let showHeader = $derived(
+    title.length > 0 ||
+      subtitle.length > 0 ||
+      (typeof image === 'string' && image.length > 0) ||
+      typeof onclose === 'function' ||
+      typeof headerAvatar === 'function' ||
+      typeof headerActions === 'function'
+  );
+  let showSuggestions = $derived(suggestions.length > 0 && messages.length === 0);
+
+  function handleSuggestion(suggestionValue: string, index: number): void {
+    if (typeof onsuggestion === 'function') {
+      onsuggestion(suggestionValue, index);
+      return;
+    }
+    onsend?.(suggestionValue, []);
+  }
+</script>
+
+<section
+  class="chat {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {#if showHeader}
+    <ChatHeader
+      {title}
+      {subtitle}
+      {image}
+      {imageAlt}
+      {closeLabel}
+      {showClose}
+      {onclose}
+      avatar={headerAvatar}
+      actions={headerActions}
+      children={headerContent}
+    />
+  {/if}
+
+  <ChatMessageList
+    {messages}
+    {autoscroll}
+    {message}
+    {messageAttachments}
+    {empty}
+    {allowCopy}
+    {onretry}
+    {onfeedback}
+  />
+
+  <div class="footer">
+    {#if showSuggestions}
+      <ChatSuggestions items={suggestions} {disabled} onselect={handleSuggestion} />
+    {/if}
+    {#if toolStatus !== null}
+      <div class="tool-status"><ChatToolStatus label={toolStatus.label} /></div>
+    {/if}
+    <ChatComposer
+      bind:value
+      bind:attachments
+      {placeholder}
+      {disabled}
+      {streaming}
+      {recording}
+      {accept}
+      {multiple}
+      onsubmit={onsend}
+      {onstop}
+      {onvoice}
+      {onattach}
+      leading={composerLeading}
+      {sendIcon}
+      {stopIcon}
+      {voiceIcon}
+      {attachIcon}
+    />
+  </div>
+</section>
+
+<style>
+  .chat {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: var(--chat-height, 100%);
+    width: var(--chat-width, 100%);
+    background: var(--chat-background, #ffffff);
+    border: var(--chat-border, none);
+    border-radius: var(--chat-border-radius, 0);
+    overflow: hidden;
+  }
+
+  .footer {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-footer-gap, 10px);
+    padding: var(--chat-footer-padding, 12px 1.5rem);
+    background: var(--chat-footer-background, transparent);
+    border-top: var(--chat-footer-border-top, none);
+  }
+
+  .tool-status {
+    display: flex;
+    justify-content: var(--chat-tool-status-justify, center);
+  }
+</style>

package/dist/Chat/Chat.svelte.d.ts

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

package/dist/Chat/controller.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ChatControllerOptions, ChatMessageData, ChatToolStatus } from './types';
+export declare class ChatController {
+    messages: ChatMessageData[];
+    isStreaming: boolean;
+    toolStatus: ChatToolStatus | null;
+    private readonly transport;
+    private readonly typewriter;
+    private readonly generateId;
+    private abortController;
+    private sessionId;
+    private revealBuffer;
+    private revealTimer;
+    constructor(options: ChatControllerOptions);
+    send(prompt: string): Promise<void>;
+    retry(): Promise<void>;
+    private stream;
+    stop(): void;
+    reset(): void;
+    private feed;
+    private tick;
+    private drain;
+    private stopReveal;
+    private patchReply;
+}

package/dist/Chat/controller.svelte.js

@@ -0,0 +1,190 @@
+import { partyOf } from './roles';
+const REVEAL_CHARS_PER_TICK = 2;
+const REVEAL_INTERVAL_MS = 22;
+function prefersReducedMotion() {
+    return (typeof window !== 'undefined' &&
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+let idCounter = 0;
+function defaultId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    idCounter += 1;
+    return `msg-${idCounter}`;
+}
+export class ChatController {
+    messages = $state([]);
+    isStreaming = $state(false);
+    toolStatus = $state(null);
+    transport;
+    typewriter;
+    generateId;
+    abortController = null;
+    sessionId = null;
+    revealBuffer = '';
+    revealTimer = null;
+    constructor(options) {
+        this.transport = options.transport;
+        this.typewriter = options.typewriter ?? false;
+        this.generateId = options.generateId ?? defaultId;
+        this.messages = options.initialMessages ?? [];
+    }
+    async send(prompt) {
+        const trimmed = prompt.trim();
+        if (trimmed.length === 0 || this.isStreaming) {
+            return;
+        }
+        const history = this.messages.slice();
+        this.messages.push({
+            id: this.generateId(),
+            role: 'sender',
+            content: trimmed,
+            status: 'sent'
+        });
+        await this.stream(trimmed, history);
+    }
+    async retry() {
+        if (this.isStreaming) {
+            return;
+        }
+        let senderIndex = -1;
+        for (let i = this.messages.length - 1; i >= 0; i -= 1) {
+            const role = this.messages.at(i)?.role;
+            if (typeof role === 'string' && partyOf(role) === 'sender') {
+                senderIndex = i;
+                break;
+            }
+        }
+        const senderMessage = this.messages.at(senderIndex);
+        if (senderIndex < 0 || typeof senderMessage === 'undefined') {
+            return;
+        }
+        const history = this.messages.slice(0, senderIndex);
+        this.messages = this.messages.slice(0, senderIndex + 1);
+        await this.stream(senderMessage.content, history);
+    }
+    async stream(message, history) {
+        this.messages.push({
+            id: this.generateId(),
+            role: 'responder',
+            content: '',
+            streaming: true
+        });
+        this.isStreaming = true;
+        const controller = new AbortController();
+        this.abortController = controller;
+        try {
+            await this.transport({ message, history, sessionId: this.sessionId, signal: controller.signal }, {
+                onText: (chunk) => {
+                    this.toolStatus = null;
+                    this.feed(chunk);
+                },
+                onToolStatus: (status) => {
+                    this.toolStatus = status;
+                },
+                onAttachment: (attachment) => {
+                    this.patchReply((reply) => {
+                        const next = reply.attachments ?? [];
+                        next.push(attachment);
+                        reply.attachments = next;
+                    });
+                },
+                onError: (error) => {
+                    this.patchReply((reply) => {
+                        reply.status = 'error';
+                        reply.content =
+                            reply.content.length > 0 ? `${reply.content}\n\n${error.message}` : error.message;
+                    });
+                },
+                onDone: (meta) => {
+                    if (typeof meta?.sessionId === 'string') {
+                        this.sessionId = meta.sessionId;
+                    }
+                }
+            });
+        }
+        catch (error) {
+            if (!controller.signal.aborted) {
+                this.patchReply((reply) => {
+                    reply.status = 'error';
+                    reply.content = error instanceof Error ? error.message : 'Something went wrong.';
+                });
+            }
+        }
+        await this.drain();
+        this.patchReply((reply) => {
+            reply.streaming = false;
+        });
+        if (this.abortController === controller) {
+            this.abortController = null;
+        }
+        this.isStreaming = false;
+        this.toolStatus = null;
+    }
+    stop() {
+        this.abortController?.abort();
+        this.abortController = null;
+        this.stopReveal();
+        this.revealBuffer = '';
+        this.patchReply((reply) => {
+            reply.streaming = false;
+        });
+        this.isStreaming = false;
+        this.toolStatus = null;
+    }
+    reset() {
+        this.stop();
+        this.sessionId = null;
+        this.messages = [];
+    }
+    feed(chunk) {
+        if (!this.typewriter || prefersReducedMotion()) {
+            this.patchReply((reply) => {
+                reply.content += chunk;
+            });
+            return;
+        }
+        this.revealBuffer += chunk;
+        if (this.revealTimer === null) {
+            this.revealTimer = setInterval(() => this.tick(), REVEAL_INTERVAL_MS);
+        }
+    }
+    tick() {
+        if (this.revealBuffer.length === 0) {
+            this.stopReveal();
+            return;
+        }
+        const piece = this.revealBuffer.slice(0, REVEAL_CHARS_PER_TICK);
+        this.revealBuffer = this.revealBuffer.slice(piece.length);
+        this.patchReply((reply) => {
+            reply.content += piece;
+        });
+    }
+    drain() {
+        return new Promise((resolve) => {
+            const check = () => {
+                if (this.revealBuffer.length === 0 && this.revealTimer === null) {
+                    resolve();
+                    return;
+                }
+                setTimeout(check, REVEAL_INTERVAL_MS);
+            };
+            check();
+        });
+    }
+    stopReveal() {
+        if (this.revealTimer !== null) {
+            clearInterval(this.revealTimer);
+            this.revealTimer = null;
+        }
+    }
+    patchReply(mutate) {
+        const last = this.messages.at(-1);
+        if (typeof last === 'undefined' || partyOf(last.role) !== 'responder') {
+            return;
+        }
+        mutate(last);
+    }
+}

package/dist/Chat/properties.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from 'svelte';
+import type { ChatMessageData, ChatToolStatus } from './types';
+import type { ChatMessageFeedback } from '../ChatMessage/properties';
+import type { ChatSuggestion } from '../ChatSuggestions/properties';
+export type ChatProperties = OptionalChatProperties & ChatEventProperties & MandatoryChatProperties;
+export type MandatoryChatProperties = {
+    messages: ChatMessageData[];
+};
+export type OptionalChatProperties = {
+    value?: string;
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    imageAlt?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    streaming?: boolean;
+    recording?: boolean;
+    autoscroll?: boolean;
+    toolStatus?: ChatToolStatus | null;
+    suggestions?: ChatSuggestion[];
+    attachments?: File[];
+    accept?: string;
+    multiple?: boolean;
+    allowCopy?: boolean;
+    closeLabel?: string;
+    showClose?: boolean;
+    headerAvatar?: Snippet;
+    headerActions?: Snippet;
+    headerContent?: Snippet;
+    message?: Snippet<[ChatMessageData]>;
+    messageAttachments?: Snippet<[ChatMessageData]>;
+    empty?: Snippet;
+    composerLeading?: Snippet;
+    sendIcon?: Snippet;
+    stopIcon?: Snippet;
+    voiceIcon?: Snippet;
+    attachIcon?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ChatEventProperties = {
+    onsend?: (value: string, attachments: File[]) => void;
+    onsuggestion?: (value: string, index: number) => void;
+    onclose?: () => void;
+    onstop?: () => void;
+    onvoice?: () => void;
+    onattach?: (files: File[]) => void;
+    onretry?: () => void;
+    onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
+};

package/dist/Chat/properties.js

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

package/dist/Chat/roles.d.ts

@@ -0,0 +1,2 @@
+import type { ChatParty, ChatRole } from './types';
+export declare function partyOf(role: ChatRole): ChatParty;

package/dist/Chat/roles.js

@@ -0,0 +1,3 @@
+export function partyOf(role) {
+    return role === 'sender' || role === 'user' ? 'sender' : 'responder';
+}

package/dist/Chat/types.d.ts

@@ -0,0 +1,45 @@
+export type ChatParty = 'sender' | 'responder';
+export type ChatRole = ChatParty | 'user' | 'assistant' | 'system' | (string & {});
+export type ChatMessageStatus = 'sending' | 'sent' | 'error';
+export type ChatMessageData = {
+    id: string;
+    role: ChatRole;
+    content: string;
+    html?: string;
+    streaming?: boolean;
+    status?: ChatMessageStatus;
+    timestamp?: number;
+    attachments?: unknown[];
+};
+export type ChatToolStatus = {
+    tool?: string;
+    label: string;
+    state?: 'calling' | 'done';
+};
+export type ChatError = {
+    code?: string;
+    message: string;
+};
+export type ChatStreamHandlers = {
+    onText: (chunk: string) => void;
+    onToolStatus?: (status: ChatToolStatus | null) => void;
+    onAttachment?: (attachment: unknown) => void;
+    onError?: (error: ChatError) => void;
+    onDone?: (meta?: ChatCompletion) => void;
+};
+export type ChatCompletion = {
+    sessionId?: string;
+};
+export type ChatTransportInput = {
+    message: string;
+    history: ChatMessageData[];
+    sessionId: string | null;
+    signal: AbortSignal;
+};
+export type ChatTransport = (input: ChatTransportInput, handlers: ChatStreamHandlers) => Promise<void>;
+export type ChatControllerOptions = {
+    transport: ChatTransport;
+    initialMessages?: ChatMessageData[];
+    typewriter?: boolean;
+    generateId?: () => string;
+};

package/dist/Chat/types.js

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