@wukazis/euphony 0.1.45

package/lib/components/message-developer-content/message-developer-content.js

@@ -0,0 +1,72 @@
+import{v as e,i as t,n as s,r as i,a as o,b as n,x as l,w as a}from"../../chunks/third-party.js";import{p as r}from"../../chunks/prismjs.js";import{g as d}from"../../chunks/utils.js";import{g as c,a as p}from"../../chunks/harmony-types.js";import{p as h}from"../../chunks/css-inline.js";import{i as v}from"../../chunks/icon-play.js";import{c as m}from"../../chunks/css/message-developer-content.js";var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,b=(e,t,s,i)=>{for(var o,n=i>1?void 0:i?u(t,s):t,l=e.length-1;l>=0;l--)(o=e[l])&&(n=(i?o(t,s,n):o(n))||n);return i&&n&&g(t,s,n),n};let f=class extends o{constructor(){super(),this.message=null,this.shouldRenderMarkdown=!1,this.markdownAllowedTags=null,this.markdownAllowedAttributes=null,this.isEditable=!1,this.blockContents=[],this.getEditableTemplate=(e,t)=>n` <!-- Important to avoid new line and whitespace here -->
+      <!-- prettier-ignore -->
+      <div
+      class="message-text"
+      contenteditable="true"
+      .innerText=${e}
+      @input=${e=>{this.messageTextChanged(e,t)}}
+    ></div>`}firstUpdated(){}willUpdate(e){if(e.has("message")||e.has("isEditable")){if(this.message){const e=c(this.message.content);if("developer"!==e)throw new Error(`Invalid message type, expect developer, but got: ${e}`)}this.resetBlockContents()}}async initData(){}messageTextChanged(e,t){const s={...t,newContent:e.target.innerText},i=new CustomEvent("message-developer-content-changed",{detail:s,bubbles:!0,composed:!0});this.dispatchEvent(i)}resetBlockContents(){if(null===this.message)throw new Error("Message is null");this.blockContents=[];const e=p(this.message.content),t=!this.isEditable;let s=[];"string"==typeof e.instructions&&(s=[e.instructions]);for(const[e,i]of s.entries())this.blockContents.push({label:`Instruction #${e}`,content:i,isContentHTML:!1,isCollapsed:t,editInfo:{location:"instruction",index:e}});if(e.tools)for(const s of Object.keys(e.tools)){const i=e.tools[s];let o=this.renderNamespaceTable(s,i.name,i.description??"",!1);for(const[e,t]of i.tools.entries()){let s=n``;s=n`${s}
+            <div class="cell-left">Name</div>
+            <div class="cell-right">${t.name}</div>`,s=n`${s}
+            <div class="cell-left">Description</div>
+            <div class="cell-right">${t.description}</div>`,t.parameters&&(s=n`${s}
+              <div class="cell-left">Parameters</div>
+              <div class="cell-right">
+                ${JSON.stringify(t.parameters,null,2)}
+              </div>`),o=n`${o}
+            <div class="cell-left">Tool ${e}</div>
+            <div class="cell-right">
+              <div class="content">
+                <div class="config-table">${s}</div>
+              </div>
+            </div> `}o=n`<div class="config-table">${o}</div>`,this.blockContents.push({label:`Tool Namespace: ${s}`,content:o,isContentHTML:!0,isCollapsed:t,editableHTML:n`<div class="config-table">
+            ${this.renderNamespaceTable(s,i.name,i.description??"",!0)}
+          </div>`})}}getHighlightedCode(e,t){if(!(t in r.languages))return n`${e}`;const s=r.languages[t],i=r.highlight(e,s,t);return n`${l(i)}`}renderNamespaceTable(e,t,s,i){return n`
+      <div class="cell-left">Name</div>
+      <div class="cell-right">
+        ${i?this.getEditableTemplate(t,{location:"tool_namespace_name",index:e}):t}
+      </div>
+      <div class="cell-left">Description</div>
+      <div class="cell-right">
+        ${i?this.getEditableTemplate(s,{location:"tool_namespace_description",index:e}):s}
+      </div>
+    `}render(){if(!this.message)return n``;let e=n``;for(const t of this.blockContents){let s=n``;if(s=t.isContentHTML?this.isEditable&&void 0!==t.editableHTML?n`${t.editableHTML}`:n`${t.content}`:this.isEditable&&void 0!==t.editInfo?this.getEditableTemplate(t.content,{location:"instruction",index:t.editInfo.index}):d(t.content,this.shouldRenderMarkdown,this.markdownAllowedTags,this.markdownAllowedAttributes),t.subBlocks&&t.subBlocks.length>0){let e=n``;for(const s of t.subBlocks){let t=n``;t=s.isContentHTML?n`${s.content}`:d(s.content,this.shouldRenderMarkdown,this.markdownAllowedTags,this.markdownAllowedAttributes),e=n`${e}
+            <div class="content-block">
+              <div class="label">
+                <button
+                  class="svg-icon collapse-icon"
+                  ?is-collapsed=${s.isCollapsed}
+                  @click=${e=>{e.preventDefault(),e.stopPropagation(),s.isCollapsed=!s.isCollapsed,this.requestUpdate()}}
+                >
+                  ${l(v)}
+                </button>
+                <span>${s.label}</span>
+              </div>
+
+              <!-- Important to avoid new line and whitespace here -->
+              <!-- prettier-ignore -->
+              <div class="message-text-container"
+                ?is-hidden=${s.isCollapsed}
+              >${t}</div>
+            </div> `}s=n`${s}${e}`}e=n`${e}
+        <div class="content-block">
+          <div class="label">
+            <button
+              class="svg-icon collapse-icon"
+              ?is-collapsed=${t.isCollapsed}
+              @click=${e=>{e.preventDefault(),e.stopPropagation(),t.isCollapsed=!t.isCollapsed,this.requestUpdate()}}
+            >
+              ${l(v)}
+            </button>
+            <span>${t.label}</span>
+          </div>
+
+          <!-- Important to avoid new line and whitespace here -->
+          <!-- prettier-ignore -->
+          <div class="message-text-container"
+            ?is-hidden=${t.isCollapsed}
+          >${s}</div>
+        </div> `}return n` <div class="message-content">${e}</div> `}};f.styles=[t`
+      ${e(m)}
+      ${e(h)}
+    `],b([s({attribute:!1})],f.prototype,"message",2),b([s({type:Boolean})],f.prototype,"shouldRenderMarkdown",2),b([s({type:Array})],f.prototype,"markdownAllowedTags",2),b([s({type:Array})],f.prototype,"markdownAllowedAttributes",2),b([s({type:Boolean})],f.prototype,"isEditable",2),b([i()],f.prototype,"blockContents",2),f=b([a("euphony-message-developer-content")],f);export{f as EuphonyMessageDeveloperContent};

package/lib/components/message-editor-popover/message-editor-popover.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Role, Message } from '../../types/harmony-types';
+export interface MessageEditorUserSetData {
+    role: Role;
+    name: string | null;
+    recipient: string | null;
+    channel: string | null;
+}
+/**
+ * Floating editor used in conversation editing mode for quick message metadata
+ * edits (author role/name, recipient, and channel).
+ */
+export declare class EuphonyMessageEditorPopover extends LitElement {
+    /**
+     * Message being edited. The component copies its current values into local
+     * editable state when this property changes so users can cancel safely.
+     */
+    message: Message | null;
+    selectedRole: Role;
+    authorName: string;
+    recipient: string;
+    channel: string;
+    constructor();
+    firstUpdated(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    initData(): Promise<void>;
+    private saveButtonClick;
+    private cancelButtonClick;
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'euphony-message-editor-popover': EuphonyMessageEditorPopover;
+    }
+}

package/lib/components/message-editor-popover/message-editor-popover.js

@@ -0,0 +1,85 @@
+import{v as e,i as t,n as s,r as i,a as n,x as o,b as l,w as a}from"../../chunks/third-party.js";import{i as r}from"../../chunks/icon-cross.js";import{R as c}from"../../chunks/harmony-types.js";import{c as p}from"../../chunks/css/message-editor-popover.js";const d='<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n<svg width="100%" height="100%" viewBox="0 0 68 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">\n    <g id="icon-check">\n        <path d="M26.302,66.557C28.206,66.557 29.72,65.727 30.794,64.066L66.39,7.768C67.22,6.498 67.513,5.473 67.513,4.447C67.513,2.055 65.95,0.443 63.509,0.443C61.751,0.443 60.774,1.029 59.7,2.738L26.106,56.645L8.431,32.816C7.308,31.303 6.233,30.668 4.622,30.668C2.181,30.668 0.423,32.377 0.423,34.818C0.423,35.844 0.862,36.967 1.692,38.041L21.663,63.969C23.03,65.727 24.397,66.557 26.302,66.557Z" style="fill-rule:nonzero;"/>\n    </g>\n</svg>\n',h='<svg\n  width="24"\n  height="24"\n  viewBox="0 0 24 24"\n  fill="none"\n  xmlns="http://www.w3.org/2000/svg"\n>\n  <path\n    fill-rule="evenodd"\n    clip-rule="evenodd"\n    d="M11.2929 9.29289C11.6834 8.90237 12.3166 8.90237 12.7071 9.29289L16.7071 13.2929C17.0976 13.6834 17.0976 14.3166 16.7071 14.7071C16.3166 15.0976 15.6834 15.0976 15.2929 14.7071L12 11.4142L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071C6.90237 14.3166 6.90237 13.6834 7.29289 13.2929L11.2929 9.29289Z"\n    fill="currentColor"\n  />\n</svg>\n';var v=Object.defineProperty,u=Object.getOwnPropertyDescriptor,m=(e,t,s,i)=>{for(var n,o=i>1?void 0:i?u(t,s):t,l=e.length-1;l>=0;l--)(n=e[l])&&(o=(i?n(t,s,o):n(o))||o);return i&&o&&v(t,s,o),o};const w=[c.User,c.Assistant,c.System,c.Developer,c.Tool];let g=class extends n{constructor(){super(),this.message=null,this.selectedRole=c.User,this.authorName="",this.recipient="",this.channel=""}firstUpdated(){}willUpdate(e){if(e.has("message")){const e=this.message;if(!e)return;this.selectedRole=e.role,this.authorName=e.name??"",this.recipient=e.recipient??"",this.channel=e.channel??""}}async initData(){}saveButtonClick(){const e={role:this.selectedRole,name:""===this.authorName.trim()?null:this.authorName,recipient:""===this.recipient.trim()?null:this.recipient,channel:""===this.channel.trim()?null:this.channel};this.dispatchEvent(new CustomEvent("save-button-clicked",{detail:e,bubbles:!0,composed:!0}))}cancelButtonClick(){this.dispatchEvent(new Event("cancel-button-clicked",{bubbles:!0,composed:!0}))}render(){return l`
+      <div
+        class="message-editor-popover"
+        tabindex="0"
+        @click=${e=>{e.stopPropagation()}}
+      >
+        <div class="row-group">
+          <div class="row-item">
+            <div class="label">Role</div>
+            <div class="editor-item">
+              <span class="select-visible">
+                ${this.selectedRole}
+                <span class="svg-icon icon-chevron">
+                  ${o(h)}
+                </span>
+              </span>
+              <select
+                .value=${this.selectedRole}
+                @change=${e=>{this.selectedRole=e.target.value}}
+              >
+                ${w.map(e=>l`<option
+                    value=${e}
+                    ?selected=${e===this.selectedRole}
+                  >
+                    ${e}
+                  </option>`)}
+              </select>
+            </div>
+          </div>
+
+          <div class="row-item field-row compact-field-row">
+            <div class="label">Channel</div>
+            <input
+              type="text"
+              placeholder="optional"
+              .value=${this.channel}
+              @input=${e=>{this.channel=e.target.value}}
+            />
+          </div>
+        </div>
+
+        <div class="row-group">
+          <div class="row-item field-row">
+            <div class="label">Author</div>
+            <input
+              type="text"
+              placeholder="optional"
+              .value=${this.authorName}
+              @input=${e=>{this.authorName=e.target.value}}
+            />
+          </div>
+        </div>
+
+        <div class="row-group">
+          <div class="row-item field-row">
+            <div class="label">Recipient</div>
+            <input
+              type="text"
+              placeholder="optional"
+              .value=${this.recipient}
+              @input=${e=>{this.recipient=e.target.value}}
+            />
+          </div>
+        </div>
+
+        <div class="row-group">
+          <div class="row-item">
+            <button
+              class="text-button"
+              @click=${()=>{this.saveButtonClick()}}
+            >
+              <span class="svg-icon">${o(d)}</span>Save
+            </button>
+            <button
+              class="text-button"
+              @click=${()=>{this.cancelButtonClick()}}
+            >
+              <span class="svg-icon">${o(r)}</span>Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    `}};g.styles=[t`
+      ${e(p)}
+    `],m([s({attribute:!1})],g.prototype,"message",2),m([i()],g.prototype,"selectedRole",2),m([i()],g.prototype,"authorName",2),m([i()],g.prototype,"recipient",2),m([i()],g.prototype,"channel",2),g=m([a("euphony-message-editor-popover")],g);export{g as EuphonyMessageEditorPopover};

package/lib/components/message-hidden/message-hidden.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Message } from '../../types/harmony-types';
+/**
+ * Compact placeholder shown when a message is hidden by focus mode filters.
+ * Clicking it emits an event that the parent conversation uses to unhide the
+ * specific message instance.
+ */
+export declare class EuphonyMessageHidden extends LitElement {
+    /**
+     * The original message object. We only use it to derive a human-readable
+     * content type label (e.g. "text", "developer") for the placeholder text.
+     */
+    message: Message | null;
+    constructor();
+    /**
+     * This method is called when the DOM is added for the first time.
+     * Present for consistency with other message components.
+     */
+    firstUpdated(): void;
+    /**
+     * This method is called before new DOM is updated and rendered.
+     * Present for consistency with other message components.
+     * @param changedProperties Property that has been changed
+     */
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * Placeholder to match the common component interface used across message
+     * components in this codebase.
+     */
+    initData(): Promise<void>;
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'euphony-message-hidden': EuphonyMessageHidden;
+    }
+}

package/lib/components/message-hidden/message-hidden.js

@@ -0,0 +1,10 @@
+import{v as e,i as s,n as t,a,b as r,w as n}from"../../chunks/third-party.js";import{t as i}from"../../chunks/harmony-types.js";import{c as o}from"../../chunks/css/message-hidden.js";var d=Object.defineProperty,c=Object.getOwnPropertyDescriptor,p=(e,s,t,a)=>{for(var r,n=a>1?void 0:a?c(s,t):s,i=e.length-1;i>=0;i--)(r=e[i])&&(n=(a?r(s,t,n):r(n))||n);return a&&n&&d(s,t,n),n};let m=class extends a{constructor(){super(),this.message=null}firstUpdated(){}willUpdate(e){}async initData(){}render(){let e="";return this.message&&(e=(i(this.message.content)??"unsupported").replaceAll("_"," ").toLowerCase()),r`
+      <div
+        class="message-content"
+        @click=${()=>{this.dispatchEvent(new Event("hidden-message-clicked",{bubbles:!0,composed:!0}))}}
+      >
+        <div class="message-text">Show ${e} message</div>
+      </div>
+    `}};m.styles=[s`
+      ${e(o)}
+    `],p([t({attribute:!1})],m.prototype,"message",2),m=p([n("euphony-message-hidden")],m);export{m as EuphonyMessageHidden};

package/lib/components/message-system-content/message-system-content.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { BlockContent } from '../../types/common-types';
+import { Message } from '../../types/harmony-types';
+interface EditMetadata {
+    location: 'model_identity' | 'conversation_start_date' | 'knowledge_cutoff' | 'valid_channels' | 'channel_required';
+    index: number | string;
+}
+export interface SystemContentEditPayload extends EditMetadata {
+    newContent: string;
+}
+/**
+ * Message system content element.
+ */
+export declare class EuphonyMessageSystemContent extends LitElement {
+    message: Message | null;
+    shouldRenderMarkdown: boolean;
+    markdownAllowedTags: string[] | null;
+    markdownAllowedAttributes: string[] | null;
+    isTranslation: boolean;
+    isEditable: boolean;
+    /**
+     * Optional URL to the current json/jsonl file (if any). This is used to
+     * resolve some relative paths in the asset pointers in the conversation. For
+     * example, `aquifer://foo` will be resolved to `dataFileURL/../assets/foo`.
+     * We won't resolve relative paths if `dataFileURL` is not provided.
+     */
+    dataFileURL: string | null;
+    blockContents: BlockContent[];
+    constructor();
+    /**
+     * This method is called when the DOM is added for the first time
+     */
+    firstUpdated(): void;
+    /**
+     * This method is called before new DOM is updated and rendered
+     * @param changedProperties Property that has been changed
+     */
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    initData(): Promise<void>;
+    messageTextChanged(e: InputEvent, editMetadata: EditMetadata): void;
+    resetBlockContents(): void;
+    getHighlightedCode(code: string, language: string): TemplateResult<1>;
+    getEditableTemplate: (content: string, editMetadata: EditMetadata) => TemplateResult<1>;
+    render(): TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'euphony-message-system-content': EuphonyMessageSystemContent;
+    }
+}
+export {};

package/lib/components/message-system-content/message-system-content.js

@@ -0,0 +1,74 @@
+import{v as e,i as t,n as s,r as i,a as n,b as l,x as o,w as a}from"../../chunks/third-party.js";import{p as d}from"../../chunks/prismjs.js";import{g as c,a as r}from"../../chunks/harmony-types.js";import{g as h}from"../../chunks/utils.js";import{p}from"../../chunks/css-inline.js";import{i as v}from"../../chunks/icon-play.js";import{c as g}from"../../chunks/css/message-system-content.js";var m=Object.defineProperty,u=Object.getOwnPropertyDescriptor,f=(e,t,s,i)=>{for(var n,l=i>1?void 0:i?u(t,s):t,o=e.length-1;o>=0;o--)(n=e[o])&&(l=(i?n(t,s,l):n(l))||l);return i&&l&&m(t,s,l),l};let b=class extends n{constructor(){super(),this.message=null,this.shouldRenderMarkdown=!1,this.markdownAllowedTags=null,this.markdownAllowedAttributes=null,this.isTranslation=!1,this.isEditable=!1,this.dataFileURL=null,this.blockContents=[],this.getEditableTemplate=(e,t)=>l` <!-- Important to avoid new line and whitespace here -->
+      <!-- prettier-ignore -->
+      <div
+      class="message-text"
+      contenteditable="true"
+      .innerText=${e}
+      @input=${e=>{this.messageTextChanged(e,t)}}
+    ></div>`}firstUpdated(){}willUpdate(e){if(e.has("message")||e.has("isEditable")){if(this.message){const e=c(this.message.content);if("system"!==e)throw new Error(`Invalid message type, expect system, but got: ${e}`)}this.resetBlockContents()}}async initData(){}messageTextChanged(e,t){const s={...t,newContent:e.target.innerText},i=new CustomEvent("message-system-content-changed",{detail:s,bubbles:!0,composed:!0});this.dispatchEvent(i)}resetBlockContents(){if(null===this.message)throw new Error("Message is null");this.blockContents=[];const e=r(this.message.content);if(e.model_identity&&this.blockContents.push({label:"Model Identity",content:e.model_identity,isContentHTML:!1,isCollapsed:!1,editInfo:{location:"model_identity",index:0}}),e.conversation_start_date&&this.blockContents.push({label:"Conversation Start Date",content:e.conversation_start_date,isContentHTML:!1,isCollapsed:!1,editInfo:{location:"conversation_start_date",index:0}}),e.knowledge_cutoff&&this.blockContents.push({label:"Knowledge Cutoff",content:e.knowledge_cutoff,isContentHTML:!1,isCollapsed:!1,editInfo:{location:"knowledge_cutoff",index:0}}),e.tools)for(const t in e.tools){let s=l``;s=l`${s}
+          <div class="cell-left">Name</div>
+          <div class="cell-right">${e.tools[t].name}</div>`,e.tools[t].description&&(s=l`${s}
+            <div class="cell-left">Description</div>
+            <div class="cell-right">
+              ${e.tools[t].description}
+            </div>`);for(const[i,n]of e.tools[t].tools.entries()){let e=l``;e=l`${e}
+            <div class="cell-left">Name</div>
+            <div class="cell-right">${n.name}</div>`,e=l`${e}
+            <div class="cell-left">Description</div>
+            <div class="cell-right">${n.description}</div>`,n.parameters&&(e=l`${e}
+              <div class="cell-left">Parameters</div>
+              <div class="cell-right">
+                ${JSON.stringify(n.parameters,null,2)}
+              </div>`),s=l`${s}
+            <div class="cell-left">Tool ${i}</div>
+            <div class="cell-right">
+              <div class="content">
+                <div class="config-table">${e}</div>
+              </div>
+            </div> `}s=l`<div class="config-table">${s}</div>`,this.blockContents.push({label:`Tool Namespace: ${t}`,content:s,isContentHTML:!0,isCollapsed:!0})}if(e.channel_config){const t=l`
+        <div class="config-table">
+          <div class="cell-left">Valid Channels</div>
+          <div class="cell-right">
+            ${e.channel_config.valid_channels.join(", ")}
+          </div>
+
+          <div class="cell-left">Channel Required</div>
+          <div class="cell-right">
+            ${e.channel_config.channel_required?"True":"False"}
+          </div>
+        </div>
+      `,s=l`
+        <div class="config-table">
+          <div class="cell-left">Valid Channels</div>
+          <div class="cell-right">
+            ${this.getEditableTemplate(e.channel_config.valid_channels.join(", "),{location:"valid_channels",index:"valid_channels"})}
+          </div>
+
+          <div class="cell-left">Channel Required</div>
+          <div class="cell-right">
+            ${this.getEditableTemplate(e.channel_config.channel_required?"True":"False",{location:"channel_required",index:"channel_required"})}
+          </div>
+        </div>
+      `;this.blockContents.push({label:"Channel Config",content:t,isContentHTML:!0,isCollapsed:!1,editableHTML:s})}}getHighlightedCode(e,t){if(!(t in d.languages))return l`${e}`;const s=d.languages[t],i=d.highlight(e,s,t);return l`${o(i)}`}render(){if(null===this.message)return l``;let e=l``;for(const t of this.blockContents){let s=l``;s=t.isContentHTML?this.isEditable&&void 0!==t.editableHTML?l`${t.editableHTML}`:l`${t.content}`:this.isEditable&&void 0!==t.editInfo?this.getEditableTemplate(t.content,{location:t.editInfo.location,index:t.editInfo.index}):h(t.content,this.shouldRenderMarkdown,this.markdownAllowedTags,this.markdownAllowedAttributes),e=l`${e}
+        <div class="content-block">
+          <div class="label">
+            <button
+              class="svg-icon collapse-icon"
+              ?is-collapsed=${t.isCollapsed}
+              @click=${e=>{e.preventDefault(),e.stopPropagation(),t.isCollapsed=!t.isCollapsed,this.requestUpdate()}}
+            >
+              ${o(v)}
+            </button>
+            <span>${t.label}</span>
+          </div>
+
+          <!-- Important to avoid new line and whitespace here -->
+          <!-- prettier-ignore -->
+          <div class="message-text-container"
+            ?is-hidden=${t.isCollapsed}
+            ?is-translation=${this.isTranslation&&t.label.includes("Instruction")}
+          >${s}</div>
+        </div> `}return l` <div class="message-content">${e}</div> `}};b.styles=[t`
+      ${e(g)}
+      ${e(p)}
+    `],f([s({attribute:!1})],b.prototype,"message",2),f([s({type:Boolean})],b.prototype,"shouldRenderMarkdown",2),f([s({type:Array})],b.prototype,"markdownAllowedTags",2),f([s({type:Array})],b.prototype,"markdownAllowedAttributes",2),f([s({type:Boolean})],b.prototype,"isTranslation",2),f([s({type:Boolean})],b.prototype,"isEditable",2),f([s({type:String,attribute:"data-file-url"})],b.prototype,"dataFileURL",2),f([i()],b.prototype,"blockContents",2),b=f([a("euphony-message-system-content")],b);export{b as EuphonyMessageSystemContent};

package/lib/components/message-text/message-text.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Message } from '../../types/harmony-types';
+/**
+ * Message text element.
+ */
+export declare class EuphonyMessageText extends LitElement {
+    message: Message | null;
+    shouldRenderMarkdown: boolean;
+    markdownAllowedTags: string[] | null;
+    markdownAllowedAttributes: string[] | null;
+    isTranslation: boolean;
+    isEditable: boolean;
+    constructor();
+    /**
+     * This method is called when the DOM is added for the first time
+     */
+    firstUpdated(): void;
+    /**
+     * This method is called before new DOM is updated and rendered
+     * @param changedProperties Property that has been changed
+     */
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    initData(): Promise<void>;
+    messageTextChanged(e: InputEvent): void;
+    /**
+     * Generates an HTML template for an editable content.
+     */
+    getEditableTemplate: (content: string) => import('lit').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'euphony-message-text': EuphonyMessageText;
+    }
+}

package/lib/components/message-text/message-text.js

@@ -0,0 +1,14 @@
+import{v as t,i as e,n as s,a,b as o,w as r}from"../../chunks/third-party.js";import{g as n,a as i}from"../../chunks/harmony-types.js";import{g as l}from"../../chunks/utils.js";import{c as d}from"../../chunks/css/message-text.js";var p=Object.defineProperty,h=Object.getOwnPropertyDescriptor,m=(t,e,s,a)=>{for(var o,r=a>1?void 0:a?h(e,s):e,n=t.length-1;n>=0;n--)(o=t[n])&&(r=(a?o(e,s,r):o(r))||r);return a&&r&&p(e,s,r),r};let g=class extends a{constructor(){super(),this.message=null,this.shouldRenderMarkdown=!1,this.markdownAllowedTags=null,this.markdownAllowedAttributes=null,this.isTranslation=!1,this.isEditable=!1,this.getEditableTemplate=t=>o` <!-- Important to avoid new line and whitespace here -->
+      <!-- prettier-ignore -->
+      <div
+      class="message-text"
+      contenteditable="true"
+      .innerText=${t}
+      @input=${t=>{this.messageTextChanged(t)}}
+    ></div>`}firstUpdated(){}willUpdate(t){if(t.has("message")&&this.message){const t=n(this.message.content);if("text"!==t)throw new Error(`Invalid message type, expect text, but got: ${t}`)}}async initData(){}messageTextChanged(t){const e=t.target.innerText,s=new CustomEvent("message-text-changed",{detail:e,bubbles:!0,composed:!0});this.dispatchEvent(s)}render(){if(null===this.message)return o``;const t=i(this.message.content).text;let e=o``;return e=this.isEditable?this.getEditableTemplate(t):l(t,this.shouldRenderMarkdown,this.markdownAllowedTags,this.markdownAllowedAttributes),o`
+      <div class="message-content" ?is-translation=${this.isTranslation}>
+        ${e}
+      </div>
+    `}};g.styles=[e`
+      ${t(d)}
+    `],m([s({attribute:!1})],g.prototype,"message",2),m([s({type:Boolean})],g.prototype,"shouldRenderMarkdown",2),m([s({type:Array})],g.prototype,"markdownAllowedTags",2),m([s({type:Array})],g.prototype,"markdownAllowedAttributes",2),m([s({type:Boolean})],g.prototype,"isTranslation",2),m([s({type:Boolean})],g.prototype,"isEditable",2),g=m([r("euphony-message-text")],g);export{g as EuphonyMessageText};

package/lib/components/message-unsupported/message-unsupported.d.ts

@@ -0,0 +1,19 @@
+import { LitElement, PropertyValues } from 'lit';
+import { Message } from '../../types/harmony-types';
+export declare class EuphonyMessageUnsupported extends LitElement {
+    message: Message | null;
+    isCollapsed: boolean;
+    firstUpdated(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    initData(): Promise<void>;
+    private getHighlightedCode;
+    private getRawContentJSON;
+    private getContentTypeLabel;
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'euphony-message-unsupported': EuphonyMessageUnsupported;
+    }
+}

package/lib/components/message-unsupported/message-unsupported.js

@@ -0,0 +1,26 @@
+import{v as s,i as e,n as t,r as n,a,b as i,x as o,w as r}from"../../chunks/third-party.js";import{p}from"../../chunks/prismjs.js";import{p as l}from"../../chunks/css-inline.js";import{i as c}from"../../chunks/icon-play.js";import{c as d}from"../../chunks/css/message-unsupported.js";var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,h=(s,e,t,n)=>{for(var a,i=n>1?void 0:n?u(e,t):e,o=s.length-1;o>=0;o--)(a=s[o])&&(i=(n?a(e,t,i):a(i))||i);return n&&i&&g(e,t,i),i};let m=class extends a{constructor(){super(...arguments),this.message=null,this.isCollapsed=!0}firstUpdated(){}willUpdate(s){s.has("message")&&(this.isCollapsed=!0)}async initData(){}getHighlightedCode(s,e){if(!(e in p.languages))return i`${s}`;const t=p.languages[e],n=p.highlight(s,t,e);return i`${o(n)}`}getRawContentJSON(){if(!this.message)return"";try{return JSON.stringify(this.message.content,null,2)}catch{return String(this.message.content)}}getContentTypeLabel(){if(!this.message)return"unknown";const s=this.message.content;return"object"==typeof s&&null!==s&&"content_type"in s?s.content_type??"unknown":"unknown"}render(){if(!this.message)return i``;const s=this.getRawContentJSON();return i`
+      <div class="message-content">
+        <div class="error-label">
+          <span>Unsupported message content type: ${this.getContentTypeLabel()}</span>
+        </div>
+        <div class="content-block">
+          <div class="label">
+            <button
+              class="svg-icon collapse-icon"
+              ?is-collapsed=${this.isCollapsed}
+              @click=${s=>{s.preventDefault(),s.stopPropagation(),this.isCollapsed=!this.isCollapsed}}
+            >
+              ${o(c)}
+            </button>
+            <span>Raw Content</span>
+          </div>
+
+          <div class="message-text-container" ?is-hidden=${this.isCollapsed}>
+            <pre class="message-pre"><code>${this.getHighlightedCode(s,"json")}</code></pre>
+          </div>
+        </div>
+      </div>
+    `}};m.styles=[e`
+      ${s(d)}
+      ${s(l)}
+    `],h([t({attribute:!1})],m.prototype,"message",2),h([n()],m.prototype,"isCollapsed",2),m=h([r("euphony-message-unsupported")],m);export{m as EuphonyMessageUnsupported};

package/lib/components/pagination/pagination.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * Pagination element.
+ *
+ */
+export declare class NightjarPagination extends LitElement {
+    curPage: number;
+    totalPageNum: number;
+    pageWindowSize: number;
+    itemsPerPage: number;
+    itemsPerPageOptions: number[];
+    constructor();
+    /**
+     * This method is called before new DOM is updated and rendered
+     * @param changedProperties Property that has been changed
+     */
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    initData(): Promise<void>;
+    pageButtonClicked(name: string): void;
+    itemsPerPageChanged(e: InputEvent): void;
+    getPageButtonTemplate: (name: string) => import('lit').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
+    static styles: import('lit').CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nightjar-pagination': NightjarPagination;
+    }
+}

package/lib/components/pagination/pagination.js

@@ -0,0 +1,35 @@
+import{v as t,i as e,n as s,a,b as i,w as o}from"../../chunks/third-party.js";import{c as r}from"../../chunks/css/pagination.js";var g=Object.defineProperty,n=Object.getOwnPropertyDescriptor,p=(t,e,s,a)=>{for(var i,o=a>1?void 0:a?n(e,s):e,r=t.length-1;r>=0;r--)(i=t[r])&&(o=(a?i(e,s,o):i(o))||o);return a&&o&&g(e,s,o),o};let P=class extends a{constructor(){super(),this.curPage=1,this.totalPageNum=10,this.pageWindowSize=5,this.itemsPerPage=10,this.itemsPerPageOptions=[10,25,50,100],this.getPageButtonTemplate=t=>i` <button
+      class="page-button"
+      ?is-cur-page=${this.curPage===parseInt(t)}
+      @click=${()=>{this.pageButtonClicked(t)}}
+    >
+      ${t}
+    </button>`}willUpdate(t){if(t.has("itemsPerPage")&&!this.itemsPerPageOptions.includes(this.itemsPerPage)){const t=[...this.itemsPerPageOptions];t.push(this.itemsPerPage),t.sort((t,e)=>t-e),this.itemsPerPageOptions=t}}async initData(){}pageButtonClicked(t){let e=this.curPage;if("Prev"===t)this.curPage>1&&(e-=1);else if("Next"===t)this.curPage<this.totalPageNum&&(e+=1);else{const s=parseInt(t);this.curPage!==s&&(e=s)}const s=new CustomEvent("page-clicked",{detail:e,bubbles:!0,composed:!0});this.dispatchEvent(s)}itemsPerPageChanged(t){const e=t.target,s=parseInt(e.value);if(s!==this.itemsPerPage){this.itemsPerPage=s;const t=new CustomEvent("items-per-page-changed",{detail:s,bubbles:!0,composed:!0});this.dispatchEvent(t)}}render(){let t=i``;if(this.totalPageNum<=this.pageWindowSize)for(let e=0;e<Math.max(this.totalPageNum,1);e++)t=i`${t}
+        ${this.getPageButtonTemplate(`${e+1}`)}`;else{const e=Math.floor((this.pageWindowSize-1)/2);let s=this.curPage-e,a=this.curPage+e;s<1?(s=1,a=this.pageWindowSize):a>this.totalPageNum&&(s=this.totalPageNum-this.pageWindowSize+1,a=this.totalPageNum),this.curPage>1&&(t=i`${t} ${this.getPageButtonTemplate("Prev")} `),s>1&&(t=i`${t} ${this.getPageButtonTemplate("1")}`,s>2&&(t=i`${t} <span>...</span>`));for(let e=s;e<a+1;e++)t=i`${t}
+        ${this.getPageButtonTemplate(e.toString())} `;a<this.totalPageNum&&(a<this.totalPageNum-1&&(t=i`${t}<span>...</span>`),t=i`${t}
+        ${this.getPageButtonTemplate(this.totalPageNum.toString())}`),this.curPage<this.totalPageNum&&(t=i`${t} ${this.getPageButtonTemplate("Next")} `)}const e=i`
+      <div class="select-container">
+        <span>Items per page:</span>
+        <div class="item-select-wrapper">
+          <select
+            id="item-per-page-select"
+            value="${this.itemsPerPage}"
+            @change=${t=>{this.itemsPerPageChanged(t)}}
+          >
+            ${this.itemsPerPageOptions.map(t=>i`<option
+                  value="${t}"
+                  ?selected=${t==this.itemsPerPage}
+                >
+                  ${t}
+                </option>`)}
+          </select>
+        </div>
+      </div>
+    `;return i`
+      <div class="pagination">
+        <div class="page-buttons">${t}</div>
+        ${e}
+      </div>
+    `}};P.styles=[e`
+      ${t(r)}
+    `],p([s({type:Number})],P.prototype,"curPage",2),p([s({type:Number})],P.prototype,"totalPageNum",2),p([s({type:Number})],P.prototype,"pageWindowSize",2),p([s({type:Number})],P.prototype,"itemsPerPage",2),p([s({type:Array})],P.prototype,"itemsPerPageOptions",2),P=p([o("nightjar-pagination")],P);export{P as NightjarPagination};