@draht/web-ui 2026.3.2-2

package/dist/components/MessageEditor.js

@@ -0,0 +1,418 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { icon } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { Select } from "@mariozechner/mini-lit/dist/Select.js";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Brain, Loader2, Paperclip, Send, Sparkles, Square } from "lucide";
+import { loadAttachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+import "./AttachmentTile.js";
+let MessageEditor = class MessageEditor extends LitElement {
+    _value = "";
+    textareaRef = createRef();
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        const oldValue = this._value;
+        this._value = val;
+        this.requestUpdate("value", oldValue);
+    }
+    isStreaming = false;
+    currentModel;
+    thinkingLevel = "off";
+    showAttachmentButton = true;
+    showModelSelector = true;
+    showThinkingSelector = true;
+    onInput;
+    onSend;
+    onAbort;
+    onModelSelect;
+    onThinkingChange;
+    onFilesChange;
+    attachments = [];
+    maxFiles = 10;
+    maxFileSize = 20 * 1024 * 1024; // 20MB
+    acceptedTypes = "image/*,application/pdf,.docx,.pptx,.xlsx,.xls,.txt,.md,.json,.xml,.html,.css,.js,.ts,.jsx,.tsx,.yml,.yaml";
+    processingFiles = false;
+    isDragging = false;
+    fileInputRef = createRef();
+    createRenderRoot() {
+        return this;
+    }
+    handleTextareaInput = (e) => {
+        const textarea = e.target;
+        this.value = textarea.value;
+        this.onInput?.(this.value);
+    };
+    handleKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (!this.isStreaming && !this.processingFiles && (this.value.trim() || this.attachments.length > 0)) {
+                this.handleSend();
+            }
+        }
+        else if (e.key === "Escape" && this.isStreaming) {
+            e.preventDefault();
+            this.onAbort?.();
+        }
+    };
+    handlePaste = async (e) => {
+        const items = e.clipboardData?.items;
+        if (!items)
+            return;
+        const imageFiles = [];
+        // Check for image items in clipboard
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.type.startsWith("image/")) {
+                const file = item.getAsFile();
+                if (file) {
+                    imageFiles.push(file);
+                }
+            }
+        }
+        // If we found images, process them
+        if (imageFiles.length > 0) {
+            e.preventDefault(); // Prevent default paste behavior
+            if (imageFiles.length + this.attachments.length > this.maxFiles) {
+                alert(`Maximum ${this.maxFiles} files allowed`);
+                return;
+            }
+            this.processingFiles = true;
+            const newAttachments = [];
+            for (const file of imageFiles) {
+                try {
+                    if (file.size > this.maxFileSize) {
+                        alert(`Image exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+                        continue;
+                    }
+                    const attachment = await loadAttachment(file);
+                    newAttachments.push(attachment);
+                }
+                catch (error) {
+                    console.error("Error processing pasted image:", error);
+                    alert(`Failed to process pasted image: ${String(error)}`);
+                }
+            }
+            this.attachments = [...this.attachments, ...newAttachments];
+            this.onFilesChange?.(this.attachments);
+            this.processingFiles = false;
+        }
+    };
+    handleSend = () => {
+        this.onSend?.(this.value, this.attachments);
+    };
+    handleAttachmentClick = () => {
+        this.fileInputRef.value?.click();
+    };
+    async handleFilesSelected(e) {
+        const input = e.target;
+        const files = Array.from(input.files || []);
+        if (files.length === 0)
+            return;
+        if (files.length + this.attachments.length > this.maxFiles) {
+            alert(`Maximum ${this.maxFiles} files allowed`);
+            input.value = "";
+            return;
+        }
+        this.processingFiles = true;
+        const newAttachments = [];
+        for (const file of files) {
+            try {
+                if (file.size > this.maxFileSize) {
+                    alert(`${file.name} exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+                    continue;
+                }
+                const attachment = await loadAttachment(file);
+                newAttachments.push(attachment);
+            }
+            catch (error) {
+                console.error(`Error processing ${file.name}:`, error);
+                alert(`Failed to process ${file.name}: ${String(error)}`);
+            }
+        }
+        this.attachments = [...this.attachments, ...newAttachments];
+        this.onFilesChange?.(this.attachments);
+        this.processingFiles = false;
+        input.value = ""; // Reset input
+    }
+    removeFile(fileId) {
+        this.attachments = this.attachments.filter((f) => f.id !== fileId);
+        this.onFilesChange?.(this.attachments);
+    }
+    handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.isDragging) {
+            this.isDragging = true;
+        }
+    };
+    handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Only set isDragging to false if we're leaving the entire component
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX;
+        const y = e.clientY;
+        if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
+            this.isDragging = false;
+        }
+    };
+    handleDrop = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.isDragging = false;
+        const files = Array.from(e.dataTransfer?.files || []);
+        if (files.length === 0)
+            return;
+        if (files.length + this.attachments.length > this.maxFiles) {
+            alert(`Maximum ${this.maxFiles} files allowed`);
+            return;
+        }
+        this.processingFiles = true;
+        const newAttachments = [];
+        for (const file of files) {
+            try {
+                if (file.size > this.maxFileSize) {
+                    alert(`${file.name} exceeds maximum size of ${Math.round(this.maxFileSize / 1024 / 1024)}MB`);
+                    continue;
+                }
+                const attachment = await loadAttachment(file);
+                newAttachments.push(attachment);
+            }
+            catch (error) {
+                console.error(`Error processing ${file.name}:`, error);
+                alert(`Failed to process ${file.name}: ${String(error)}`);
+            }
+        }
+        this.attachments = [...this.attachments, ...newAttachments];
+        this.onFilesChange?.(this.attachments);
+        this.processingFiles = false;
+    };
+    firstUpdated() {
+        const textarea = this.textareaRef.value;
+        if (textarea) {
+            textarea.focus();
+        }
+    }
+    render() {
+        // Check if current model supports thinking/reasoning
+        const model = this.currentModel;
+        const supportsThinking = model?.reasoning === true; // Models with reasoning:true support thinking
+        return html `
+			<div
+				class="bg-card rounded-xl border shadow-sm relative ${this.isDragging ? "border-primary border-2 bg-primary/5" : "border-border"}"
+				@dragover=${this.handleDragOver}
+				@dragleave=${this.handleDragLeave}
+				@drop=${this.handleDrop}
+			>
+				<!-- Drag overlay -->
+				${this.isDragging
+            ? html `
+					<div class="absolute inset-0 bg-primary/10 rounded-xl pointer-events-none z-10 flex items-center justify-center">
+						<div class="text-primary font-medium">${i18n("Drop files here")}</div>
+					</div>
+				`
+            : ""}
+
+				<!-- Attachments -->
+				${this.attachments.length > 0
+            ? html `
+							<div class="px-4 pt-3 pb-2 flex flex-wrap gap-2">
+								${this.attachments.map((attachment) => html `
+										<attachment-tile
+											.attachment=${attachment}
+											.showDelete=${true}
+											.onDelete=${() => this.removeFile(attachment.id)}
+										></attachment-tile>
+									`)}
+							</div>
+						`
+            : ""}
+
+				<textarea
+					class="w-full bg-transparent p-4 text-foreground placeholder-muted-foreground outline-none resize-none overflow-y-auto"
+					placeholder=${i18n("Type a message...")}
+					rows="1"
+					style="max-height: 200px; field-sizing: content; min-height: 1lh; height: auto;"
+					.value=${this.value}
+					@input=${this.handleTextareaInput}
+					@keydown=${this.handleKeyDown}
+					@paste=${this.handlePaste}
+					${ref(this.textareaRef)}
+				></textarea>
+
+				<!-- Hidden file input -->
+				<input
+					type="file"
+					${ref(this.fileInputRef)}
+					@change=${this.handleFilesSelected}
+					accept=${this.acceptedTypes}
+					multiple
+					style="display: none;"
+				/>
+
+				<!-- Button Row -->
+				<div class="px-2 pb-2 flex items-center justify-between">
+					<!-- Left side - attachment and thinking selector -->
+					<div class="flex gap-2 items-center">
+						${this.showAttachmentButton
+            ? this.processingFiles
+                ? html `
+										<div class="h-8 w-8 flex items-center justify-center">
+											${icon(Loader2, "sm", "animate-spin text-muted-foreground")}
+										</div>
+									`
+                : html `
+										${Button({
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    onClick: this.handleAttachmentClick,
+                    children: icon(Paperclip, "sm"),
+                })}
+									`
+            : ""}
+						${supportsThinking && this.showThinkingSelector
+            ? html `
+									${Select({
+                value: this.thinkingLevel,
+                placeholder: i18n("Off"),
+                options: [
+                    { value: "off", label: i18n("Off"), icon: icon(Brain, "sm") },
+                    { value: "minimal", label: i18n("Minimal"), icon: icon(Brain, "sm") },
+                    { value: "low", label: i18n("Low"), icon: icon(Brain, "sm") },
+                    { value: "medium", label: i18n("Medium"), icon: icon(Brain, "sm") },
+                    { value: "high", label: i18n("High"), icon: icon(Brain, "sm") },
+                ],
+                onChange: (value) => {
+                    this.onThinkingChange?.(value);
+                },
+                width: "80px",
+                size: "sm",
+                variant: "ghost",
+                fitContent: true,
+            })}
+								`
+            : ""}
+					</div>
+
+					<!-- Model selector and send on the right -->
+					<div class="flex gap-2 items-center">
+						${this.showModelSelector && this.currentModel
+            ? html `
+									${Button({
+                variant: "ghost",
+                size: "sm",
+                onClick: () => {
+                    // Focus textarea before opening model selector so focus returns there
+                    this.textareaRef.value?.focus();
+                    // Wait for next frame to ensure focus takes effect before dialog captures it
+                    requestAnimationFrame(() => {
+                        this.onModelSelect?.();
+                    });
+                },
+                children: html `
+											${icon(Sparkles, "sm")}
+											<span class="ml-1">${this.currentModel.id}</span>
+										`,
+                className: "h-8 text-xs truncate",
+            })}
+								`
+            : ""}
+						${this.isStreaming
+            ? html `
+									${Button({
+                variant: "ghost",
+                size: "icon",
+                onClick: this.onAbort,
+                children: icon(Square, "sm"),
+                className: "h-8 w-8",
+            })}
+								`
+            : html `
+									${Button({
+                variant: "ghost",
+                size: "icon",
+                onClick: this.handleSend,
+                disabled: (!this.value.trim() && this.attachments.length === 0) || this.processingFiles,
+                children: html `<div style="transform: rotate(-45deg)">${icon(Send, "sm")}</div>`,
+                className: "h-8 w-8",
+            })}
+								`}
+					</div>
+				</div>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property()
+], MessageEditor.prototype, "value", null);
+__decorate([
+    property()
+], MessageEditor.prototype, "isStreaming", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "currentModel", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "thinkingLevel", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "showAttachmentButton", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "showModelSelector", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "showThinkingSelector", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onInput", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onSend", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onAbort", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onModelSelect", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onThinkingChange", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "onFilesChange", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "attachments", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "maxFiles", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "maxFileSize", void 0);
+__decorate([
+    property()
+], MessageEditor.prototype, "acceptedTypes", void 0);
+__decorate([
+    state()
+], MessageEditor.prototype, "processingFiles", void 0);
+__decorate([
+    state()
+], MessageEditor.prototype, "isDragging", void 0);
+MessageEditor = __decorate([
+    customElement("message-editor")
+], MessageEditor);
+export { MessageEditor };
+//# sourceMappingURL=MessageEditor.js.map

package/dist/components/MessageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageEditor.js","sourceRoot":"","sources":["../../src/components/MessageEditor.ts"],"names":[],"mappings":"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"}

package/dist/components/MessageList.d.ts

@@ -0,0 +1,14 @@
+import type { AgentMessage, AgentTool } from "@draht/agent-core";
+import { LitElement, type TemplateResult } from "lit";
+export declare class MessageList extends LitElement {
+    messages: AgentMessage[];
+    tools: AgentTool[];
+    pendingToolCalls?: Set<string>;
+    isStreaming: boolean;
+    onCostClick?: () => void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    private buildRenderItems;
+    render(): TemplateResult<1>;
+}
+//# sourceMappingURL=MessageList.d.ts.map

package/dist/components/MessageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/components/MessageList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEjE,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,qBAAa,WAAY,SAAQ,UAAU;IACf,QAAQ,EAAE,YAAY,EAAE,CAAM;IAC9B,KAAK,EAAE,SAAS,EAAE,CAAM;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAS;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzD,UAAmB,gBAAgB,IAAI,WAAW,GAAG,gBAAgB,CAEpE;IAEQ,iBAAiB,IAAI,IAAI,CAGjC;IAED,OAAO,CAAC,gBAAgB;IAwDf,MAAM,sBASd;CACD"}

package/dist/components/MessageList.js

@@ -0,0 +1,104 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { renderMessage } from "./message-renderer-registry.js";
+export class MessageList extends LitElement {
+    messages = [];
+    tools = [];
+    pendingToolCalls;
+    isStreaming = false;
+    onCostClick;
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.display = "block";
+    }
+    buildRenderItems() {
+        // Map tool results by call id for quick lookup
+        const resultByCallId = new Map();
+        for (const message of this.messages) {
+            if (message.role === "toolResult") {
+                resultByCallId.set(message.toolCallId, message);
+            }
+        }
+        const items = [];
+        let index = 0;
+        for (const msg of this.messages) {
+            // Skip artifact messages - they're for session persistence only, not UI display
+            if (msg.role === "artifact") {
+                continue;
+            }
+            // Try custom renderer first
+            const customTemplate = renderMessage(msg);
+            if (customTemplate) {
+                items.push({ key: `msg:${index}`, template: customTemplate });
+                index++;
+                continue;
+            }
+            // Fall back to built-in renderers
+            if (msg.role === "user" || msg.role === "user-with-attachments") {
+                items.push({
+                    key: `msg:${index}`,
+                    template: html `<user-message .message=${msg}></user-message>`,
+                });
+                index++;
+            }
+            else if (msg.role === "assistant") {
+                const amsg = msg;
+                items.push({
+                    key: `msg:${index}`,
+                    template: html `<assistant-message
+						.message=${amsg}
+						.tools=${this.tools}
+						.isStreaming=${false}
+						.pendingToolCalls=${this.pendingToolCalls}
+						.toolResultsById=${resultByCallId}
+						.hideToolCalls=${false}
+						.hidePendingToolCalls=${this.isStreaming}
+						.onCostClick=${this.onCostClick}
+					></assistant-message>`,
+                });
+                index++;
+            }
+            else {
+                // Skip standalone toolResult messages; they are rendered via paired tool-message above
+                // Skip unknown roles
+            }
+        }
+        return items;
+    }
+    render() {
+        const items = this.buildRenderItems();
+        return html `<div class="flex flex-col gap-3">
+			${repeat(items, (it) => it.key, (it) => it.template)}
+		</div>`;
+    }
+}
+__decorate([
+    property({ type: Array })
+], MessageList.prototype, "messages", void 0);
+__decorate([
+    property({ type: Array })
+], MessageList.prototype, "tools", void 0);
+__decorate([
+    property({ type: Object })
+], MessageList.prototype, "pendingToolCalls", void 0);
+__decorate([
+    property({ type: Boolean })
+], MessageList.prototype, "isStreaming", void 0);
+__decorate([
+    property({ attribute: false })
+], MessageList.prototype, "onCostClick", void 0);
+// Register custom element
+if (!customElements.get("message-list")) {
+    customElements.define("message-list", MessageList);
+}
+//# sourceMappingURL=MessageList.js.map

package/dist/components/MessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../src/components/MessageList.ts"],"names":[],"mappings":"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"}

package/dist/components/Messages.d.ts

@@ -0,0 +1,95 @@
+import type { AssistantMessage as AssistantMessageType, ImageContent, TextContent, ToolCall, ToolResultMessage as ToolResultMessageType, UserMessage as UserMessageType } from "@draht/ai";
+import { LitElement, type TemplateResult } from "lit";
+import type { Attachment } from "../utils/attachment-utils.js";
+import "./ThinkingBlock.js";
+import type { AgentTool } from "@draht/agent-core";
+export type UserMessageWithAttachments = {
+    role: "user-with-attachments";
+    content: string | (TextContent | ImageContent)[];
+    timestamp: number;
+    attachments?: Attachment[];
+};
+export interface ArtifactMessage {
+    role: "artifact";
+    action: "create" | "update" | "delete";
+    filename: string;
+    content?: string;
+    title?: string;
+    timestamp: string;
+}
+declare module "@draht/agent-core" {
+    interface CustomAgentMessages {
+        "user-with-attachments": UserMessageWithAttachments;
+        artifact: ArtifactMessage;
+    }
+}
+export declare class UserMessage extends LitElement {
+    message: UserMessageWithAttachments | UserMessageType;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+export declare class AssistantMessage extends LitElement {
+    message: AssistantMessageType;
+    tools?: AgentTool<any>[];
+    pendingToolCalls?: Set<string>;
+    hideToolCalls: boolean;
+    toolResultsById?: Map<string, ToolResultMessageType>;
+    isStreaming: boolean;
+    hidePendingToolCalls: boolean;
+    onCostClick?: () => void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+}
+export declare class ToolMessageDebugView extends LitElement {
+    callArgs: any;
+    result?: ToolResultMessageType;
+    hasResult: boolean;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    private pretty;
+    render(): TemplateResult<1>;
+}
+export declare class ToolMessage extends LitElement {
+    toolCall: ToolCall;
+    tool?: AgentTool<any>;
+    result?: ToolResultMessageType;
+    pending: boolean;
+    aborted: boolean;
+    isStreaming: boolean;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+export declare class AbortedMessage extends LitElement {
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    protected render(): unknown;
+}
+import type { AgentMessage } from "@draht/agent-core";
+import type { Message } from "@draht/ai";
+/**
+ * Convert attachments to content blocks for LLM.
+ * - Images become ImageContent blocks
+ * - Documents with extractedText become TextContent blocks with filename header
+ */
+export declare function convertAttachments(attachments: Attachment[]): (TextContent | ImageContent)[];
+/**
+ * Check if a message is a UserMessageWithAttachments.
+ */
+export declare function isUserMessageWithAttachments(msg: AgentMessage): msg is UserMessageWithAttachments;
+/**
+ * Check if a message is an ArtifactMessage.
+ */
+export declare function isArtifactMessage(msg: AgentMessage): msg is ArtifactMessage;
+/**
+ * Default convertToLlm for web-ui apps.
+ *
+ * Handles:
+ * - UserMessageWithAttachments: converts to user message with content blocks
+ * - ArtifactMessage: filtered out (UI-only, for session reconstruction)
+ * - Standard LLM messages (user, assistant, toolResult): passed through
+ */
+export declare function defaultConvertToLlm(messages: AgentMessage[]): Message[];
+//# sourceMappingURL=Messages.d.ts.map

package/dist/components/Messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.d.ts","sourceRoot":"","sources":["../../src/components/Messages.ts"],"names":[],"mappings":"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"}