@oddkin/ai 0.0.0-stage → 1.0.0-beta.1

package/dist/prod/model-select/model-select.template.js

@@ -0,0 +1,39 @@
+import { chevronDownGlyph } from "@oddkin/components/styles";
+import { html } from "@oddkin/core/template";
+import { format } from "../internal/strings.js";
+const modelSelectTemplate = (host) => {
+  const t = host._strings, selected = host.selected;
+  return html`<div class="field">
+    <label part="label" class="label" for="select">${host.label || t.label}</label>
+    <div class="control-box">
+      <select
+        part="select"
+        id="select"
+        class="control"
+        aria-describedby="details"
+        ?disabled=${host.disabled || !host.models.length}
+        @change=${host._onChange}
+      >
+        ${host.models.length ? null : html`<option value="">${t.none}</option>`}
+        ${host.models.map((model) => html`<option
+              .value=${model.id}
+              ?disabled=${!model.available}
+              ?selected=${model.id === host.value}
+            >
+              ${model.available ? model.label : format(t.unavailable, { label: model.label })}
+            </option>`)}
+      </select>
+      <span class="control-end">${chevronDownGlyph}</span>
+    </div>
+    <div part="details" id="details" class="description details" ?hidden=${!selected}>
+      <span ?hidden=${!selected?.description}>${selected?.description ?? ""}</span>
+      <span ?hidden=${!selected?.capabilities?.length}
+        >${t.capabilities}: ${selected?.capabilities?.join(", ") ?? ""}</span
+      >
+      <span ?hidden=${!selected || selected.available}>${selected?.reason ?? ""}</span>
+    </div>
+  </div>`;
+};
+export {
+  modelSelectTemplate
+};

package/dist/prod/prompt-input/index.js

@@ -0,0 +1,11 @@
+import { OddkinPromptInput, PROMPT_INPUT_STRINGS } from "./prompt-input.js";
+import { promptInputTemplate } from "./prompt-input.template.js";
+import { promptInputStyles } from "./prompt-input.styles.js";
+import { promptInputDefinition } from "./prompt-input.definition.js";
+export {
+  OddkinPromptInput,
+  PROMPT_INPUT_STRINGS,
+  promptInputDefinition,
+  promptInputStyles,
+  promptInputTemplate
+};

package/dist/prod/prompt-input/prompt-input.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { promptInputDefinition } from "./prompt-input.definition.js";
+define(promptInputDefinition);

package/dist/prod/prompt-input/prompt-input.definition.js

@@ -0,0 +1,16 @@
+import { buttonDefinition } from "@oddkin/components/button";
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinPromptInput } from "./prompt-input.js";
+import { promptInputStyles } from "./prompt-input.styles.js";
+import { promptInputTemplate } from "./prompt-input.template.js";
+const promptInputDefinition = compose({
+  name: "odd-prompt-input",
+  element: OddkinPromptInput,
+  template: promptInputTemplate,
+  styles: [aiBaseStyles, promptInputStyles],
+  dependencies: { button: buttonDefinition }
+});
+export {
+  promptInputDefinition
+};

package/dist/prod/prompt-input/prompt-input.js

@@ -0,0 +1,285 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { signal } from "@oddkin/core/reactive";
+import { can, unavailableReason } from "../contracts/normalize.js";
+import { ComposerController } from "../controllers/composer.js";
+import { announceEvent, attachmentAddEvent, attachmentRemoveEvent, promptStopEvent, promptSubmitEvent } from "../events.js";
+import { format, formatNumber, langOf, strings } from "../internal/strings.js";
+const PROMPT_INPUT_STRINGS = {
+  label: "Message",
+  placeholder: "Ask anything",
+  send: "Send",
+  stop: "Stop",
+  attach: "Attach files",
+  remove: "Remove {name}",
+  hintSend: "Enter sends. Shift+Enter adds a line.",
+  hintNewline: "Ctrl+Enter or \u2318+Enter sends. Enter adds a line.",
+  sending: "Sending\u2026",
+  failed: "{message} Your message was kept; you can edit it and send again.",
+  busyAttachments: "Wait for attachments to finish uploading.",
+  failedAttachments: "Remove or replace attachments that failed.",
+  unavailable: "Sending is not available.",
+  dropHere: "Drop files to attach them",
+  "ai.attachment.type": "{name} is not an accepted file type.",
+  "ai.attachment.size": "{name} is larger than {limit}.",
+  "ai.attachment.count": "You can attach up to {limit} files.",
+  "ai.attachment.unavailable": "Attachments are not available.",
+  selected: "Selected",
+  uploading: "Uploading {progress}",
+  uploaded: "Uploaded",
+  processing: "Processing\u2026",
+  ready: "Ready",
+  failedStatus: "Failed",
+  removed: "Removed"
+};
+class OddkinPromptInput extends OddkinElement.with({
+  controller: prop.object({
+    description: "Host-owned composer controller; otherwise the element owns one."
+  }),
+  label: prop.string({
+    default: "",
+    description: 'Accessible label; defaults to the localized "Message".'
+  }),
+  placeholder: prop.string({
+    default: "",
+    description: "Placeholder; never a substitute for the label."
+  }),
+  disabled: prop.boolean({ reflect: !0, description: "Prevents editing and sending." }),
+  loading: prop.boolean({
+    reflect: !0,
+    description: "Work is running; shows Stop instead of Send when stopping is available."
+  }),
+  attemptId: prop.string({
+    default: "",
+    attribute: "attempt-id",
+    description: "Attempt targeted by Stop."
+  }),
+  capabilities: prop.object({
+    description: "`send`, `stop`, and `attachments` decide which controls are enabled."
+  }),
+  accept: prop.string({
+    default: "",
+    description: "Accepted attachment types (comma-separated, as `<input accept>`)."
+  }),
+  maxFileSize: prop.number({
+    default: 0,
+    attribute: "max-file-size",
+    description: "Maximum attachment size in bytes (0: no limit)."
+  }),
+  maxFiles: prop.number({
+    default: 0,
+    attribute: "max-files",
+    description: "Maximum attachments (0: no limit)."
+  }),
+  enterBehavior: prop.enum(["send", "newline"], {
+    default: "send",
+    attribute: "enter-behavior",
+    description: "What Enter does."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static shadowRootOptions = { mode: "open", delegatesFocus: !0 };
+  static events = {
+    "odd-prompt-submit": promptSubmitEvent,
+    "odd-prompt-stop": promptStopEvent,
+    "odd-attachment-add": attachmentAddEvent,
+    "odd-attachment-remove": attachmentRemoveEvent,
+    "odd-announce": announceEvent
+  };
+  #owned;
+  #composing = !1;
+  /** @internal Mirror of the composer state for the template. */
+  _state = signal({ text: "", revision: 0, attachments: [], issues: [] });
+  /** @internal A blocked send attempt's explanation. */
+  _blocked = signal("");
+  /** @internal Files are being dragged over. */
+  _dragging = signal(!1);
+  /** @internal */
+  get _strings() {
+    return strings(PROMPT_INPUT_STRINGS, this.strings);
+  }
+  /** The composer in use (host-supplied or owned). */
+  get activeController() {
+    return this.controller ?? (this.#owned ??= new ComposerController());
+  }
+  /** The draft text. Setting it never dispatches events. */
+  get value() {
+    return this.activeController.getSnapshot().text;
+  }
+  set value(text) {
+    this.activeController.setText(String(text ?? ""));
+  }
+  /** The host accepted a submission; clears the submitted draft unless it was edited since. */
+  acknowledge(submissionId) {
+    return this.activeController.acknowledge(submissionId);
+  }
+  /** The host rejected a submission; the draft is kept and the error shown. */
+  fail(submissionId, error) {
+    const failed = this.activeController.fail(submissionId, error);
+    return failed && this.emit(announceEvent, {
+      text: error.message,
+      priority: "assertive",
+      key: `submit-failed:${submissionId}`
+    }), failed;
+  }
+  /** @internal Why sending is not possible right now (empty string: just empty). */
+  _sendBlocker(state) {
+    const t = this._strings;
+    if (this.disabled)
+      return "";
+    if (!can(this.capabilities ?? { send: { available: !0 } }, "send"))
+      return unavailableReason(this.capabilities, "send") ?? t.unavailable;
+    const blocker = this.activeController.blocker();
+    if (blocker === "attachments-busy")
+      return t.busyAttachments;
+    if (blocker === "attachments-failed")
+      return t.failedAttachments;
+    if (blocker || !state.text.trim() && !state.attachments.length || this.loading)
+      return "";
+  }
+  /** @internal */
+  _attachmentsAvailable() {
+    return this.capabilities ? can(this.capabilities, "attachments") : !0;
+  }
+  /** @internal */
+  _issue(issue) {
+    const t = this._strings, limit = issue.code === "ai.attachment.size" && typeof issue.limit == "number" ? this._bytes(issue.limit) : String(issue.limit ?? "");
+    return format(t[issue.code], { name: issue.name, limit });
+  }
+  /** @internal */
+  _bytes(size) {
+    const locale = langOf(this);
+    return size < 1024 ? `${formatNumber(size, locale)} B` : size < 1024 * 1024 ? `${formatNumber(Math.round(size / 1024), locale)} KB` : `${formatNumber(Math.round(size / 104857.6) / 10, locale)} MB`;
+  }
+  /** @internal */
+  _onInput = (event) => {
+    const area = event.target;
+    this.activeController.setText(area.value), this._blocked.value = "", this.#resize(area);
+  };
+  /** @internal */
+  _onCompositionStart = () => {
+    this.#composing = !0;
+  };
+  /** @internal */
+  _onCompositionEnd = () => {
+    this.#composing = !1;
+  };
+  /** @internal */
+  _onKeyDown = (event) => {
+    if (event.key !== "Enter" || event.isComposing || this.#composing || event.keyCode === 229)
+      return;
+    const modifier = event.ctrlKey || event.metaKey;
+    (this.enterBehavior === "send" ? !event.shiftKey && !modifier && !event.altKey : modifier) && (event.preventDefault(), this._submit());
+  };
+  /** @internal */
+  _onSubmit = (event) => {
+    event.preventDefault(), this._submit();
+  };
+  /** Request submission of the draft (same as pressing Send). Returns the submission id. */
+  submit() {
+    return this._submit();
+  }
+  /** @internal */
+  _submit() {
+    const controller = this.activeController, blocker = this._sendBlocker(controller.getSnapshot());
+    if (blocker !== void 0) {
+      this._blocked.value = blocker, blocker && this.emit(announceEvent, {
+        text: blocker,
+        priority: "polite",
+        key: `blocked:${Date.now()}`
+      });
+      return;
+    }
+    const submission = controller.beginSubmit();
+    if (!submission)
+      return;
+    if (!this.emit(promptSubmitEvent, {
+      submissionId: submission.submissionId,
+      revision: submission.revision,
+      text: submission.text,
+      attachments: submission.attachments
+    })) {
+      controller.cancel(submission.submissionId);
+      return;
+    }
+    return submission.submissionId;
+  }
+  /** @internal */
+  _stop = () => {
+    this.emit(promptStopEvent, { attemptId: this.attemptId || void 0 });
+  };
+  /** @internal */
+  _pick = () => {
+    this.shadowRoot?.querySelector('input[type="file"]')?.click();
+  };
+  /** @internal */
+  _onFiles = (event) => {
+    const input = event.target;
+    this.#add([...input.files ?? []]), input.value = "";
+  };
+  /** @internal */
+  _onPaste = (event) => {
+    const files = [...event.clipboardData?.files ?? []];
+    files.length && (event.clipboardData?.getData("text") || event.preventDefault(), this.#add(files));
+  };
+  /** @internal */
+  _onDragOver = (event) => {
+    !event.dataTransfer?.types.includes("Files") || !this._attachmentsAvailable() || this.disabled || (event.preventDefault(), event.dataTransfer.dropEffect = "copy", this._dragging.value = !0);
+  };
+  /** @internal */
+  _onDragLeave = (event) => {
+    (!event.relatedTarget || !this.shadowRoot?.contains(event.relatedTarget)) && (this._dragging.value = !1);
+  };
+  /** @internal */
+  _onDrop = (event) => {
+    this._dragging.value = !1;
+    const files = [...event.dataTransfer?.files ?? []];
+    files.length && (event.preventDefault(), this.#add(files));
+  };
+  /** @internal */
+  _remove = (event) => {
+    const attachmentId = event.currentTarget.dataset.id;
+    attachmentId && (this.activeController.removeAttachment(attachmentId), this.emit(attachmentRemoveEvent, { attachmentId }), this.shadowRoot?.querySelector("textarea")?.focus());
+  };
+  #add(files) {
+    if (!files.length || this.disabled)
+      return;
+    const controller = this.activeController;
+    controller.configure({
+      accept: this.accept ? this.accept.split(",") : [],
+      ...this.maxFileSize > 0 ? { maxFileSize: this.maxFileSize } : {},
+      ...this.maxFiles > 0 ? { maxFiles: this.maxFiles } : {},
+      attachments: this._attachmentsAvailable()
+    });
+    const added = controller.addFiles(files);
+    added.length && this.emit(attachmentAddEvent, { attachments: added });
+    const issues = controller.getSnapshot().issues;
+    issues.length && this.emit(announceEvent, {
+      text: issues.map((i) => this._issue(i)).join(" "),
+      priority: "polite",
+      key: `issues:${Date.now()}`
+    });
+  }
+  #resize(area) {
+    area.style.blockSize = "auto", area.style.blockSize = `${area.scrollHeight}px`;
+  }
+  connected(scope) {
+    scope.effect((run) => {
+      const controller = this.activeController;
+      controller.restorePreviews();
+      const state = controller.state;
+      run.effect(() => {
+        this._state.value = state.value;
+      }), controller === this.#owned && run.add(() => controller.releasePreviews(), "composer previews");
+    }, { name: "<odd-prompt-input> composer" });
+  }
+  updated() {
+    const area = this.shadowRoot?.querySelector("textarea");
+    area && this.#resize(area);
+  }
+}
+export {
+  OddkinPromptInput,
+  PROMPT_INPUT_STRINGS
+};

package/dist/prod/prompt-input/prompt-input.recipe.js

@@ -0,0 +1,14 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const promptInputRecipe = defineLayoutRecipe({
+  name: "prompt-input",
+  regions: {
+    toolbar: row({ gap: token("space.xs"), wrap: !0 }),
+    attachments: row({ gap: token("space.xs"), align: "stretch", wrap: !0 }),
+    issues: stack({ gap: token("space.xs") }),
+    attachment: row({ gap: token("space.2xs"), wrap: !0 })
+  }
+});
+export {
+  promptInputRecipe
+};

package/dist/prod/prompt-input/prompt-input.recipe.styles.js

@@ -0,0 +1,37 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const promptInputRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+  .attachments {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+  .issues {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .attachment {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-2xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  promptInputRecipeStyles
+};

package/dist/prod/prompt-input/prompt-input.styles.js

@@ -0,0 +1,93 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { promptInputRecipeStyles } from "./prompt-input.recipe.styles.js";
+const promptInputStyles = css`
+  ${promptInputRecipeStyles}
+  .form {
+    position: relative;
+    display: grid;
+    gap: ${token("space.xs")};
+    padding: ${token("space.xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.strong")};
+    border-radius: ${token("radius.lg")};
+    background: ${token("color.surface.default")};
+  }
+  .form:focus-within {
+    border-color: ${token("color.focus.ring")};
+  }
+  .form[data-dragging='true'] {
+    border-style: dashed;
+    background: ${token("color.surface.hover")};
+  }
+  .input {
+    inline-size: 100%;
+    min-block-size: ${token("target.min")};
+    max-block-size: var(--odd-prompt-input-max-height, 40vh);
+    padding: ${token("space.xs")};
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    resize: none;
+    overflow-y: auto;
+  }
+  .spacer {
+    flex: 1 1 auto;
+  }
+  .attachments,
+  .issues {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .attachment {
+    max-inline-size: 100%;
+    padding-inline: ${token("space.xs")} 0;
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.sunken")};
+    font-size: ${token("font.size.sm")};
+  }
+  .attachment[data-status='failed'] {
+    border-color: ${token("color.danger.foreground")};
+  }
+  .thumb {
+    inline-size: 2rem;
+    block-size: 2rem;
+    object-fit: cover;
+    border-radius: ${token("radius.sm")};
+  }
+  .name {
+    min-inline-size: 0;
+    max-inline-size: 16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .status-text {
+    margin: 0;
+    font-size: ${token("font.size.sm")};
+    color: ${token("color.text.secondary")};
+  }
+  .status-text[data-failed='true'] {
+    color: ${token("color.danger.foreground")};
+  }
+  .drop-hint {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    margin: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    font-weight: ${token("font.weight.semibold")};
+  }
+  @media (forced-colors: active) {
+    .form {
+      border-color: CanvasText;
+    }
+  }
+`;
+export {
+  promptInputStyles
+};

package/dist/prod/prompt-input/prompt-input.template.js

@@ -0,0 +1,104 @@
+import { live } from "@oddkin/core/helpers/live";
+import { html, repeat } from "@oddkin/core/template";
+import { can } from "../contracts/normalize.js";
+import { format } from "../internal/strings.js";
+const promptInputTemplate = (host) => {
+  const t = host._strings, state = host._state.value, submitting = state.submission?.status === "submitting", failure = state.submission?.status === "failed" ? state.submission.error : void 0, blocker = host._sendBlocker(state), showStop = host.loading && can(host.capabilities, "stop"), attachments = host._attachmentsAvailable(), blocked = host._blocked.value, status = submitting && !showStop ? t.sending : failure ? format(t.failed, { message: failure.message }) : blocked, describedBy = ["hint", state.issues.length ? "issues" : "", status ? "status" : ""].filter(Boolean).join(" ");
+  return html`<form
+    part="form"
+    class="form"
+    data-dragging=${host._dragging.value ? "true" : "false"}
+    @submit=${host._onSubmit}
+    @dragover=${host._onDragOver}
+    @dragleave=${host._onDragLeave}
+    @drop=${host._onDrop}
+  >
+    <slot name="header"></slot>
+    <ul part="attachments" class="attachments" ?hidden=${!state.attachments.length}>
+      ${repeat(state.attachments, (a) => a.id, (a) => {
+    const label = a.status === "uploading" ? format(t.uploading, {
+      progress: a.progress !== void 0 ? `${Math.round(a.progress * 100)}%` : ""
+    }) : a.status === "failed" ? t.failedStatus : t[a.status];
+    return html`<li class="attachment" data-status=${a.status}>
+            ${a.previewUrl ? html`<img class="thumb" alt="" src=${a.previewUrl} />` : null}
+            <span class="name">${a.name}</span>
+            <span class="muted">${host._bytes(a.size)} · ${label}</span>
+            <span class="error" ?hidden=${!a.error}>${a.error?.message ?? ""}</span>
+            <button
+              class="text-button"
+              type="button"
+              data-id=${a.id}
+              aria-label=${format(t.remove, { name: a.name })}
+              @click=${host._remove}
+            >
+              <span aria-hidden="true">✕</span>
+            </button>
+          </li>`;
+  })}
+    </ul>
+    <ul id="issues" class="issues error" ?hidden=${!state.issues.length}>
+      ${state.issues.map((issue) => html`<li>${host._issue(issue)}</li>`)}
+    </ul>
+    <label class="visually-hidden" for="input">${host.label || t.label}</label>
+    <textarea
+      part="input"
+      id="input"
+      class="input"
+      rows="1"
+      placeholder=${host.placeholder || t.placeholder}
+      aria-describedby=${describedBy}
+      aria-invalid=${failure ? "true" : null}
+      ?disabled=${host.disabled}
+      .value=${live(state.text)}
+      @input=${host._onInput}
+      @keydown=${host._onKeyDown}
+      @compositionstart=${host._onCompositionStart}
+      @compositionend=${host._onCompositionEnd}
+      @paste=${host._onPaste}
+    ></textarea>
+    <div part="toolbar" class="toolbar">
+      <slot name="toolbar-start"></slot>
+      ${attachments ? html`<button
+                class="text-button"
+                type="button"
+                ?disabled=${host.disabled}
+                @click=${host._pick}
+              >
+                <span aria-hidden="true">📎</span><span class="attach-label">${t.attach}</span>
+              </button>
+              <input
+                type="file"
+                multiple
+                hidden
+                accept=${host.accept || null}
+                @change=${host._onFiles}
+              />` : null}
+      <span class="spacer"></span>
+      <slot name="toolbar-end"></slot>
+      <span id="hint" class="visually-hidden"
+        >${host.enterBehavior === "send" ? t.hintSend : t.hintNewline}</span
+      >
+      ${showStop ? html`<odd-button class="stop" @click=${host._stop}>${t.stop}</odd-button>` : html`<odd-button
+              class="send"
+              appearance="primary"
+              ?disabled=${blocker !== void 0 && !submitting}
+              ?loading=${submitting}
+              @click=${host._onSubmit}
+              >${t.send}</odd-button
+            >`}
+    </div>
+    <p
+      part="status"
+      id="status"
+      class="status-text"
+      data-failed=${failure ? "true" : "false"}
+      ?hidden=${!status}
+    >
+      ${status}
+    </p>
+    <p class="drop-hint" aria-hidden="true" ?hidden=${!host._dragging.value}>${t.dropHere}</p>
+  </form>`;
+};
+export {
+  promptInputTemplate
+};

package/dist/prod/question/index.js

@@ -0,0 +1,11 @@
+import { OddkinQuestion, QUESTION_STRINGS } from "./question.js";
+import { questionTemplate } from "./question.template.js";
+import { questionStyles } from "./question.styles.js";
+import { questionDefinition } from "./question.definition.js";
+export {
+  OddkinQuestion,
+  QUESTION_STRINGS,
+  questionDefinition,
+  questionStyles,
+  questionTemplate
+};

package/dist/prod/question/question.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { questionDefinition } from "./question.definition.js";
+define(questionDefinition);

package/dist/prod/question/question.definition.js

@@ -0,0 +1,16 @@
+import { buttonDefinition } from "@oddkin/components/button";
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinQuestion } from "./question.js";
+import { questionStyles } from "./question.styles.js";
+import { questionTemplate } from "./question.template.js";
+const questionDefinition = compose({
+  name: "odd-question",
+  element: OddkinQuestion,
+  template: questionTemplate,
+  styles: [aiBaseStyles, questionStyles],
+  dependencies: { button: buttonDefinition }
+});
+export {
+  questionDefinition
+};