@modelprofile.com/flexharness 6.1.0 → 7.0.0

package/dist_ts_chat_web/flexchat-input.js

@@ -0,0 +1,172 @@
+import { LitElement, html, css } from './plugins.js';
+export class FlexChatInput extends LitElement {
+    value = '';
+    static properties = {
+        disabled: { type: Boolean },
+        placeholder: { type: String },
+    };
+    static styles = css `
+    :host {
+      display: block;
+    }
+
+    .input-wrap {
+      display: flex;
+      align-items: flex-end;
+      gap: 8px;
+      padding: 10px 12px;
+      background: rgba(255, 255, 255, 0.04);
+      border-radius: 16px;
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .input-wrap:focus-within {
+      border-color: rgba(99, 102, 241, 0.45);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
+    }
+
+    .input-wrap.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+
+    textarea {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: #e4e4e7;
+      font-size: 14px;
+      font-family: inherit;
+      line-height: 1.5;
+      resize: none;
+      min-height: 22px;
+      max-height: 110px;
+      padding: 2px 0;
+    }
+
+    textarea::placeholder {
+      color: rgba(255, 255, 255, 0.22);
+    }
+
+    .send-btn {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: none;
+      background: linear-gradient(135deg, #6366f1, #7c3aed);
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
+      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+    }
+
+    .send-btn:hover:not(:disabled) {
+      transform: scale(1.08);
+      box-shadow: 0 3px 12px rgba(99, 102, 241, 0.45);
+    }
+
+    .send-btn:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+
+    .send-btn:disabled {
+      opacity: 0.25;
+      cursor: default;
+      box-shadow: none;
+    }
+
+    .send-btn svg {
+      width: 15px;
+      height: 15px;
+    }
+
+    .hint {
+      display: flex;
+      justify-content: flex-end;
+      padding: 5px 2px 0;
+    }
+
+    .hint-text {
+      font-size: 10.5px;
+      color: rgba(255, 255, 255, 0.13);
+    }
+
+    kbd {
+      padding: 0 3px;
+      border-radius: 3px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      font-family: inherit;
+      font-size: 10px;
+    }
+  `;
+    constructor() {
+        super();
+        this.disabled = false;
+        this.placeholder = 'Type a message...';
+    }
+    handleKeydown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this.submit();
+        }
+    }
+    handleInput(e) {
+        const textarea = e.target;
+        this.value = textarea.value;
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.min(textarea.scrollHeight, 110) + 'px';
+    }
+    submit() {
+        if (!this.value.trim() || this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('send', {
+            detail: { text: this.value.trim() },
+            bubbles: true,
+            composed: true,
+        }));
+        this.value = '';
+        const textarea = this.shadowRoot?.querySelector('textarea');
+        if (textarea) {
+            textarea.value = '';
+            textarea.style.height = 'auto';
+        }
+    }
+    render() {
+        const canSend = !this.disabled && !!this.value.trim();
+        return html `
+      <div class="input-wrap ${this.disabled ? 'disabled' : ''}">
+        <textarea
+          rows="1"
+          .value=${this.value}
+          @input=${this.handleInput}
+          @keydown=${this.handleKeydown}
+          placeholder=${this.disabled ? 'Waiting for response...' : this.placeholder}
+          ?disabled=${this.disabled}
+        ></textarea>
+        <button
+          class="send-btn"
+          @click=${this.submit}
+          ?disabled=${!canSend}
+          aria-label="Send message"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="12" y1="19" x2="12" y2="5"></line>
+            <polyline points="5 12 12 5 19 12"></polyline>
+          </svg>
+        </button>
+      </div>
+      <div class="hint">
+        <span class="hint-text"><kbd>Enter</kbd> send · <kbd>Shift+Enter</kbd> new line</span>
+      </div>
+    `;
+    }
+}
+customElements.define('flexchat-input', FlexChatInput);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxleGNoYXQtaW5wdXQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi90c19jaGF0X3dlYi9mbGV4Y2hhdC1pbnB1dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFHckQsTUFBTSxPQUFPLGFBQWMsU0FBUSxVQUFVO0lBR25DLEtBQUssR0FBRyxFQUFFLENBQUM7SUFFbkIsTUFBTSxDQUFDLFVBQVUsR0FBRztRQUNsQixRQUFRLEVBQUUsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFO1FBQzNCLFdBQVcsRUFBRSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7S0FDOUIsQ0FBQztJQUVGLE1BQU0sQ0FBQyxNQUFNLEdBQWMsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBb0c3QixDQUFDO0lBRUY7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQUNSLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxXQUFXLEdBQUcsbUJBQW1CLENBQUM7SUFDekMsQ0FBQztJQUVPLGFBQWEsQ0FBQyxDQUFnQjtRQUNwQyxJQUFJLENBQUMsQ0FBQyxHQUFHLEtBQUssT0FBTyxJQUFJLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ3JDLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDaEIsQ0FBQztJQUNILENBQUM7SUFFTyxXQUFXLENBQUMsQ0FBUTtRQUMxQixNQUFNLFFBQVEsR0FBRyxDQUFDLENBQUMsTUFBNkIsQ0FBQztRQUNqRCxJQUFJLENBQUMsS0FBSyxHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUM7UUFDNUIsUUFBUSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO1FBQy9CLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLFlBQVksRUFBRSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUM7SUFDdEUsQ0FBQztJQUVPLE1BQU07UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDaEQsSUFBSSxDQUFDLGFBQWEsQ0FDaEIsSUFBSSxXQUFXLENBQUMsTUFBTSxFQUFFO1lBQ3RCLE1BQU0sRUFBRSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxFQUFFO1lBQ25DLE9BQU8sRUFBRSxJQUFJO1lBQ2IsUUFBUSxFQUFFLElBQUk7U0FDZixDQUFDLENBQ0gsQ0FBQztRQUNGLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsYUFBYSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzVELElBQUksUUFBUSxFQUFFLENBQUM7WUFDYixRQUFRLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNwQixRQUFRLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7UUFDakMsQ0FBQztJQUNILENBQUM7SUFFRCxNQUFNO1FBQ0osTUFBTSxPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3RELE9BQU8sSUFBSSxDQUFBOytCQUNnQixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEVBQUU7OzttQkFHM0MsSUFBSSxDQUFDLEtBQUs7bUJBQ1YsSUFBSSxDQUFDLFdBQVc7cUJBQ2QsSUFBSSxDQUFDLGFBQWE7d0JBQ2YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMseUJBQXlCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXO3NCQUM5RCxJQUFJLENBQUMsUUFBUTs7OzttQkFJaEIsSUFBSSxDQUFDLE1BQU07c0JBQ1IsQ0FBQyxPQUFPOzs7Ozs7Ozs7Ozs7S0FZekIsQ0FBQztJQUNKLENBQUM7O0FBR0gsY0FBYyxDQUFDLE1BQU0sQ0FBQyxnQkFBZ0IsRUFBRSxhQUFhLENBQUMsQ0FBQyJ9

package/dist_ts_chat_web/flexchat-message.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from './plugins.js';
+import type { CSSResult, TemplateResult } from './plugins.js';
+export declare class FlexChatMessage extends LitElement {
+    role: 'user' | 'assistant' | 'tool';
+    content: string;
+    toolName: string;
+    timestamp: number;
+    static properties: {
+        role: {
+            type: StringConstructor;
+        };
+        content: {
+            type: StringConstructor;
+        };
+        toolName: {
+            type: StringConstructor;
+        };
+        timestamp: {
+            type: NumberConstructor;
+        };
+    };
+    static styles: CSSResult;
+    constructor();
+    private formatTime;
+    render(): TemplateResult;
+}

package/dist_ts_chat_web/flexchat-message.js

@@ -0,0 +1,174 @@
+import { LitElement, html, css } from './plugins.js';
+export class FlexChatMessage extends LitElement {
+    static properties = {
+        role: { type: String },
+        content: { type: String },
+        toolName: { type: String },
+        timestamp: { type: Number },
+    };
+    static styles = css `
+    :host {
+      display: block;
+      animation: msg-in 0.3s ease-out both;
+    }
+
+    @keyframes msg-in {
+      from {
+        opacity: 0;
+        transform: translateY(6px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* ── Message Row ── */
+    .row {
+      display: flex;
+      gap: 10px;
+      align-items: flex-end;
+      margin-bottom: 4px;
+    }
+
+    .row.user {
+      justify-content: flex-end;
+    }
+
+    .row.assistant {
+      justify-content: flex-start;
+    }
+
+    /* ── Avatar ── */
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .avatar.user {
+      background: linear-gradient(135deg, #3b82f6, #2563eb);
+      color: #fff;
+      order: 2;
+    }
+
+    .avatar.assistant {
+      background: linear-gradient(135deg, #6366f1, #7c3aed);
+      color: #fff;
+    }
+
+    /* ── Bubble ── */
+    .bubble {
+      padding: 10px 14px;
+      border-radius: 18px;
+      word-break: break-word;
+      white-space: pre-wrap;
+      font-size: 14px;
+      line-height: 1.55;
+      max-width: min(75%, 480px);
+    }
+
+    .bubble.user {
+      background: linear-gradient(135deg, #3b82f6, #2563eb);
+      color: #fff;
+      border-bottom-right-radius: 6px;
+    }
+
+    .bubble.assistant {
+      background: var(--flexchat-assistant-bg, #1e1e2e);
+      border: 1px solid var(--flexchat-assistant-border, rgba(255, 255, 255, 0.08));
+      color: var(--flexchat-assistant-text, #d1d5db);
+      border-bottom-left-radius: 6px;
+    }
+
+    /* ── Tool ── */
+    .tool-row {
+      display: flex;
+      justify-content: flex-start;
+      padding: 2px 0 2px 38px;
+    }
+
+    .tool-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      background: rgba(99, 102, 241, 0.1);
+      border: 1px solid rgba(99, 102, 241, 0.15);
+      border-radius: 20px;
+      font-size: 11px;
+      font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
+      color: #a5b4fc;
+    }
+
+    .tool-icon {
+      font-size: 10px;
+    }
+
+    .tool-name {
+      font-weight: 600;
+    }
+
+    /* ── Timestamp ── */
+    .time-row {
+      padding: 1px 38px 6px;
+      font-size: 10px;
+      color: rgba(255, 255, 255, 0.2);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .time-row.user {
+      text-align: right;
+    }
+
+    .time-row.assistant {
+      text-align: left;
+    }
+  `;
+    constructor() {
+        super();
+        this.role = 'user';
+        this.content = '';
+        this.toolName = '';
+        this.timestamp = 0;
+    }
+    formatTime(ts) {
+        if (!ts)
+            return '';
+        const d = new Date(ts);
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    render() {
+        if (this.role === 'tool') {
+            return html `
+        <div class="tool-row">
+          <div class="tool-pill">
+            <span class="tool-icon">⚡</span>
+            <span class="tool-name">${this.toolName || 'tool'}</span>
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <div class="row ${this.role}">
+        <div class="avatar ${this.role}">
+          ${this.role === 'user' ? '⬆' : '✦'}
+        </div>
+        <div class="bubble ${this.role}">
+          ${this.content}
+        </div>
+      </div>
+      ${this.timestamp
+            ? html `<div class="time-row ${this.role}">${this.formatTime(this.timestamp)}</div>`
+            : ''}
+    `;
+    }
+}
+customElements.define('flexchat-message', FlexChatMessage);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmxleGNoYXQtbWVzc2FnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzX2NoYXRfd2ViL2ZsZXhjaGF0LW1lc3NhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBR3JELE1BQU0sT0FBTyxlQUFnQixTQUFRLFVBQVU7SUFNN0MsTUFBTSxDQUFDLFVBQVUsR0FBRztRQUNsQixJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO1FBQ3RCLE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDekIsUUFBUSxFQUFFLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUMxQixTQUFTLEVBQUUsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO0tBQzVCLENBQUM7SUFFRixNQUFNLENBQUMsTUFBTSxHQUFjLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTRIN0IsQ0FBQztJQUVGO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFDUixJQUFJLENBQUMsSUFBSSxHQUFHLE1BQU0sQ0FBQztRQUNuQixJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQztRQUNsQixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsU0FBUyxHQUFHLENBQUMsQ0FBQztJQUNyQixDQUFDO0lBRU8sVUFBVSxDQUFDLEVBQVU7UUFDM0IsSUFBSSxDQUFDLEVBQUU7WUFBRSxPQUFPLEVBQUUsQ0FBQztRQUNuQixNQUFNLENBQUMsR0FBRyxJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUN2QixPQUFPLENBQUMsQ0FBQyxrQkFBa0IsQ0FBQyxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQzFFLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLE1BQU0sRUFBRSxDQUFDO1lBQ3pCLE9BQU8sSUFBSSxDQUFBOzs7O3NDQUlxQixJQUFJLENBQUMsUUFBUSxJQUFJLE1BQU07OztPQUd0RCxDQUFDO1FBQ0osQ0FBQztRQUVELE9BQU8sSUFBSSxDQUFBO3dCQUNTLElBQUksQ0FBQyxJQUFJOzZCQUNKLElBQUksQ0FBQyxJQUFJO1lBQzFCLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUc7OzZCQUVmLElBQUksQ0FBQyxJQUFJO1lBQzFCLElBQUksQ0FBQyxPQUFPOzs7UUFHaEIsSUFBSSxDQUFDLFNBQVM7WUFDZCxDQUFDLENBQUMsSUFBSSxDQUFBLHdCQUF3QixJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRO1lBQ25GLENBQUMsQ0FBQyxFQUFFO0tBQ1AsQ0FBQztJQUNKLENBQUM7O0FBR0gsY0FBYyxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsRUFBRSxlQUFlLENBQUMsQ0FBQyJ9

package/dist_ts_chat_web/flexchat-window.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from './plugins.js';
+import type { CSSResult, TemplateResult, IChatSession, PropertyValues } from './plugins.js';
+import './flexchat-message.js';
+import './flexchat-input.js';
+export declare class FlexChatWindow extends LitElement {
+    chatSession: IChatSession;
+    placeholder: string;
+    headerTitle: string;
+    private messages;
+    private busy;
+    private streamingText;
+    private unsubscribe;
+    static properties: {
+        chatSession: {
+            attribute: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        headerTitle: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    static styles: CSSResult;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private bindSession;
+    private scrollToBottom;
+    private handleSend;
+    render(): TemplateResult;
+}